no triggering on click event

no triggering on click event

This is a simple but intersting issue. Suppose I have two sections of
respective class .toggle0 and .toggle1, suppose I want to display .toggle0
and hide .toggle1 when clicking on some tag .footer0, and vice-versa : I
want to display .toggle1 and hide .toggle0 when clicking on some tag
.footer1. Now this code works correctly
$('.toggle1').hide();
var i=0;
$(".footer"+i+"").click(function(){
$(".toggle"+(i+1) %2+"").hide();
$(".toggle"+i+"").show();
});
var j=1;
$(".footer"+j+"").click(function(){
$(".toggle"+(j+1) %2+"").hide();
$(".toggle"+j+"").show();
});
but this doesn't work in the sense that nothing happens on click event
for(var i=0;i<2;i++){
$(".footer"+i+"").click(function(){
$(".toggle"+(i+1) %2+"").hide();
$(".toggle"+i+"").show();
});
}
if I put this
$('.toggle1').hide();
var i=0;
$(".footer"+i+"").click(function(){
$(".toggle"+(i+1) %2+"").hide();
$(".toggle"+i+"").show();
});
i =1;
$(".footer"+i+"").click(function(){
$(".toggle"+(i+1) %2+"").hide();
$(".toggle"+i+"").show();
});
.toggle1 displays and .toggle0 hides when clicking on some tag .footer1
but .toggle0 does not display and .toggle1 does not hide when clicking on
some tag .footer0 . It seems that the second click event takes precedence
upon the first