How to use clearInterval per button click on jquery

How to use clearInterval per button click on jquery

I have 2 boxes, first blue box must start moving arrow up, which works
fine, and I want the second yellow box to pause arrow, but I couldn't make
it happen. Thank you for suggestions.
http://jsfiddle.net/Km7nw/3/
$(document).ready(function(){
$('.box1').click(function () {
setInterval(function(){
$('.arrow').css("top", "-=20px");
}, 400);
//clicking on box2 must clearInterval
});
});