clearInterval not working

First I have two divs box1 and box2 and i have these checkbox(s) which eventually it does stuff. One if these "stuff". is blinking. so I made a function called blink where it makes the div sort of blinking.

I passed it through setInterval so it would blink until I tell it otherwise. (I tell it to stop blinking with checkbox input)

now to break the Interval I used clearInterval. but when I do that I won't stop. it does nothing or I am getting it wrong.

The idea here. when the page start, #box1 will be already blinking. When checkbox #stopBlink is checked. box2 should start blinking and box1 should stop. when #stopBlink is unchecked box1 should start blinking and box2 should stops.

Script:

    function blink(text) {
        $(text).fadeTo(400, 0.3).fadeTo(900, 1.0);
    }

    $(document).ready(function(){
        box1_id = setInterval(function(){blink("#box1")}, 0);

        $('input[type="checkbox"]').click(function() {
            if($("#stopBlink").is(':checked'))
            {
                clearInterval(box_id);
                box2_id = setInterval(function(){blink("#box2")}, 0);
            }else{
                clearInterval(box2_id);
                box1_id = setInterval(function(){blink("#box1")}, 0);
            }
        });
    });

HTML:

<input type="checkbox" id="DoSomethingElse"> Do Something Else
<input type="checkbox" id="stopBlink"> Stop the Blinking
<div id="box1">BLINKING</div>
<div id="box2">NOT BLINKING</div>