Значение атрибута данных обновления

Question

Я пытаюсь обновить идентификатор данных на кнопке Edit, но по какой-то причине он остается на одном идентификаторе, который взял его с первого выбора. Вот мой код:

<input type="text" class="form-control" id="clr_name" name="clr_name"> 

<button type="submit" class="btn col-xs-6 hide edit">Edit</button> 
<button type="submit" class="btn col-xs-6 hide delete">Delete</button> 

<div class="col-xs-6"> 
    <table class="table table-striped"> 
    <tbody> 

     <tr> 
     <td>Black</td> 
     <td data-id="1" class="edit">edit</td> 
     </tr> 

     <tr> 
     <td>White</td> 
     <td data-id="2" class="edit">edit</td> 
     </tr> 

     <tr> 
     <td>Blue</td> 
     <td data-id="3" class="edit">edit</td> 
     </tr> 

    </tbody> 
    </table> 
</div> 
<p>ID: <span class="dataId"></span></p> 

JavaScript

$("tbody").on("click", "td.edit", function() { 
    formAction($(this).attr("data-id"), $(this).parent(), $(this).prev('td')); 
}); 

function formAction(id, parent, prev) { 
    $(".dataId").text(id); 
    $("tr").attr('data-edit', null); 
    parent.attr("data-edit", true); 
    $("#clr_name").val(prev.text()); 
    $(".edit, .delete").attr("data-id", id); 
} 

jsfiddle.net/52hyktb4/

Answer 1

Причина он остается на один идентификатор, что у вас есть эта линия в вашей функции:

$(name + " .edit, " + name + " .delete").attr("data-id", id); 

После ваш первый щелчок - вы установите его на все из .edit и .delete элементов в вашем документе.

Вы можете просто удалить эту строку, и ваш код должен работать так, как вы ожидали.