javascript - Form inside while loop working on only the 1st result -

i have inside of while loop. processing ajax. working on first , not on other results. please have look.

<?php while($a = $stmt->fetch()){ ?>     <form method="post" action="">         <input type="hidden" value="<?php echo $mbs_id; ?>" class="memid">         <select class="validity" class="upgrade-valsel">             <?php while($mv = $mval->fetch()){ extract($mv); ?>                 <option value="<?php echo $mv_id; ?>"><?php echo $mv_validity; if($mv_validity == 1){ echo " month"; }else{ echo " months"; } ?></option>             <?php } ?>         </select>         <input type="submit" value="upgrade" class="submit">         <div class="center-align" style="margin-left: -20px"><img src="images/loading.gif" width="auto" id="loading-rent" style="margin-right: 0px; height: 40px"></div>     </form> <?php } ?> 

when click on submit button on first result process result. when click on other buttons refreshing page. tried replacing ids class after not 1st 1 working. please me.

script

$(document).ready(function() {     $(".submit").click(function() {         var datastring = {             memid: $(".memid").val(),             validity: $(".validity").val()         };         $.confirm({         title: 'confirm!',         content: 'are sure want upgrade membership <?php echo $mbs_name; ?>?',         buttons: {         confirm: function () {                     $.ajax({                         type: "post",                         datatype : "json",                         url: "upgrade-process.php",                         data: datastring,                         cache: true,                         beforesend: function(){                             $("#submit").hide();                             $("#loading-rent").show();                             $(".message").hide();                         },                         success: function(json){                             settimeout(function(){                                 $(".message").html(json.status).fadein();                                 $("#submit").show();                                 $("#loading-rent").hide();                             },1000);                         }                     });         },         cancel: function () {           $.alert('<span style="font-size: 23px">upgrade cancelled!</span>');         }         }         });         return false;     }); }); 

as @alive die , jeff try explain it, use selector returns several objects when use function on set of objects, jquery use first object of set.

you have use "this" work on context :

$(".submit").click(function(e) {     e.preventdefault();     // $(this) : input class .submit (the 1 click)     // parent() : parent of $(this) (the form)     // , find child unique class want     var datastring = {         memid: $(this).parent().find(".memid").val(),         validity: $(this).parent().find(".validity").val()     };     // edit: loading image (you should use class instead of selector)     var loader = $(this).parent().find("> div");     // after can use loader in function , sub functions     loader.hide();     // , rest of code same logic... }); 

pay attention each function has different $(this) linked execution context.