Question

I have this form http://jsfiddle.net/thiswolf/XDsSt/ with four identical inputs and buttons.The problem is,each section is updates its own unique data in the database so when updating,its important the submit button i click updates the database with the input from that section only.

My function is

$(document).ready(function() {
          $(".xx").live('click', function(){
         alert('clicked');
         });
        });

How do i make sure the button click is unique to that section?.

Answer 1

Get the corresponding section that button belongs to . Then access the elements inside that. You may use the jQuery closest()/parent()(if only one layer of hierarchy of controls) function for that.

$(document).ready(function() {
     $(".xx").live('click', function(e){
       e.preventDefault();  //if you want to prevent normal form submit
       var item=$(this);
       var sectionClicked=item.closest("section");
       //Let's alert the first text box   
       alert(sectionClicked.find("input").first().val());
       //do whatever with the items belongs the current section

     });
});

Sample : http://jsfiddle.net/XDsSt/8/

I recommend you to switch to jQuery on instead of live as it is deprecated.