JS + PHP. Почему открывается только первая форма из массива?

Дорогие люди, объясните пожалуйста почему у меня в этом скрипте:

HTML:

1. <div id="content"> </div>

[js] <script type="text/javascript">
$(document).ready(function(){ $('#klik').submit(function(){
$.ajax({
type: "POST",
url: "korzina1.php",
data: "i="+$("#i").val(),
success: function(html){
$("#content").html(html);
}
});
return false;
});
});
</script>[/js]

PHP:

1.     <?
2.     $i=0;
3.     while ($i<5) {
4.     ?>
5.    
6.      <form id="klik"  >  
7.      <input type="hidden" id="i" value="<? echo $i; ?>" >
8.      <input id="klik" name="submit" src="img/qwe1.gif" onclick="src='/img/qwe3.gif'"  type="image" border="0">     
9.     </form> <br><br>
10.    
11.     <?  $i++;}   ?>

Работает только первое значение из массива т.е. нулевое.
Вообще здесь выводится список форм с разными $i , при нажатии на картинку в форме должен загружаться файл korzina1.php. Но происходит это только с первой формой, при нажатии на остальные происходит перезагрузка страницы.

Может кто знает в чем проблема?

 

Но на сколько я понимаю в этот идентификатор (

HTML:

1. <div id="content"> </div>

если я правильно понял) подставляется пришедшее значение из [js]url: "korzina1.php",[/js] и должно подставляться любое значение в зависимости от выбранной формы, но во всяком случае не перезагружаться.
А у меня

HTML:

1. <div id="content"> </div>

открывается только при нажатии на первую форму.

 

хорошо, пробую и JS поставить в цикл, получаю:

HTML:

1.     <div id="content"> </div>  

PHP:

1. <?
2.     $i=0;
3.     while ($i<5) {
4.     ?>

[js]<script type="text/javascript">
$(document).ready(function(){ $('#klik').submit(function(){
$.ajax({
type: "POST",
url: "korzina1.php",
data: "i<?echo $i;?>="+$("#i").val(),
success: function(html){
$("#content").html(html);
}
});
return false;
});
});
</script>[/js]

HTML:

1.  <form id="klik"  >  
2.      <input type="hidden" id="i<? echo $i; ?>" value="<? echo $i; ?>" >
3.      <input id="klik" name="submit" src="img/qwe1.gif"   type="image" border="0">      
4.     </form> <br><br>

PHP:

1. <?  $i++;}   ?>

заменил data: "i<?echo $i;?>="+$("#i").val(),
и id в форме тоже id="i<? echo $i; ?>

в исходном коде по php нарекани нет, а вот в JS я не понимаю что точно должно быть.

 

Блин тут голову сломаешь, в общем делаю добавление товаров в корзину, без перезагрузкки, с JS почти не знаком, точнее чисто на интуиции делаю.
Подскажите если не сложно, как в моем примере реализовать отправку id товара в korzina1.php Пожалуйста.

 

подозреваю что тут нужно изменить только одну строку [js]data: "i="+$("#i").val(),[/js] но вот что именно менять? И в цикл загонять JS не стоит.

 

Нашел я эту коллизию))) Спасибо Volt. Извини за тупость.

Вот так работает))

HTML:

1.  <div id="content"> </div>  

PHP:

1. <?
2. $i=0; while($i<2){
3. ?>

[js] <script type="text/javascript">
$(document).ready(function(){ $('#klik<?echo $i;?>').submit(function(){
$.ajax({
type: "POST",
url: "blocs/korzina1.php",
data: "i="+$("#i<?echo $i;?>").val(),
success: function(html){
$("#content").html(html);
}
});
return false;
});
});
</script>[/js]

HTML:

1.      <form id="klik<?echo $i;?>"  >  
2.      <input type="hidden" id="i<?echo $i;?>" value="<?echo $i;?>" >
3.      <input id="klik<?echo $i;?>" name="submit" src="img/qwe1.gif"   type="image" border="0">      
4.     </form> <br><br>

PHP:

1. <? $i++; } ?>