ajax - JQuery: How to select specific element of a class by data-, then use as target? -

i've modified code tutorial ( http://gazpo.com/2011/09/contenteditable/ demo: http://gazpo.com/downloads/tutorials/html5/contenteditable/ ) show more 1 div of contenteditable div database, , through ajax, save changes of modified .

here's php produces: http://jsfiddle.net/fmdx/78rwq/

    <div data-id="0" class="wrap"><!-- content wrapper -->       <div data-id="0" class="status"></div>     <div data-id="0" class="content">     <p data-id="0" style="padding-left:7px;">             <span data-id="0" style="padding-right:10px;">a)</span>             <span data-id="0" data-primary="1" data-comcounted="0" data-showcom="1" data-fileno="cttest" data-part="1" class="editable" contenteditable="true">compliance terms , conditions of clearwater ordinance set forth city of sheboygan.</span></p>         </div>       <button data-id="0" class="save">save</button>           </div> 

multiplied how many rows within table.

here's jquery/ajax: $(document).ready(function() {

    $(".save").click(function (e) {              //how narrow down these variables specific grouping being selected?         var text = $('.editable').html();         var primary_key = $('.editable').attr('data-primary');         var showcom = $('.editable').attr('data-showcom');         var comcounted = $('.editable').attr('data-comcounted');         var part = $('.editable').attr('data-part');         var fileno = $('.editable').attr('data-fileno');          $.ajax({             url: 'save.php',             type: 'post',             data: {             text: text,             primary_key: primary_key,             showcom: showcom,             comcounted: comcounted,             part: part,             fileno: fileno                           },                           success:function (data) {                  if (data == '1')                 {                     $(".status")                     .addclass("success")                     .html("data saved successfully")                     .fadein('fast')                     .delay(3000)                     .fadeout('slow');                    }                 else                 {                     $(".status")                     .addclass("error")                     .html("an error occured, data not saved")                     .fadein('fast')                     .delay(3000)                     .fadeout('slow');                    }             }         });        });      $(".editable").click(function (e) {         $(".save").show();         e.stoppropagation();     });      $(document).click(function() {         $(".save").hide();       }); }); 

this, multiplied many rows returned database.

when 1 div selected, every save button appears, , when data saved, shows status bar every div.

what trying data-id attribute of span selected it unique wrapper, status, contentedibable section, , save bar. in way, serving id whole wrapped segment.how change jquery/ajax when when contenteditable div selected, specific div modified, have save button pop on it, , have status bar show (instead of every 1 showing)?

you need make selector specific current element in action.

i.e

$('.save').show(); becomes $(this).closest('.content').next(".save").show() $('.editable').html(); becomes $this.prev('.content').find('.editable') $('.status') becomes $this.closest('.wrap').find(".status")

js:

$(".editable").click(function (e) {     $(this).closest('.content').next(".save").show(); //<-- select specific 1     e.stoppropagation(); });    $(".save").click(function (e) {         var $this = $(this),             $editable = $this.prev('.content').find('.editable'),             text = $editable.html(),             primary_key = $editable.data('primary'),             showcom = $editable.data('showcom'),             comcounted = $editable.data('comcounted'),             part = $editable.data('part'),             fileno = $editable.data('fileno');          $.ajax({             url: '/echo/json',             type: 'post',             data: {                 text: text,                 primary_key: primary_key,                 showcom: showcom,                 comcounted: comcounted,                 part: part,                 fileno: fileno             },             success: function (data) {                 var mg = "an error occured, data not saved";                 if (data == '1') {                     mg = "data saved successfully";             }             $this.closest('.wrap').find(".status")                 .addclass("success")                 .html(mg)                 .fadein('fast')                 .delay(3000)                 .fadeout('slow');         }         });     }); 

fiddle