<tbody> <tr class="d-flex"> <td> <div class="form-check"> <label for="" class="form-check-label"> <input type="checkbox" class="form-check-input"> </label> </div> </td> <td class="table__task__text"> <span class="notebookLine1 "></span> <span class="notebookLine2 "></span> <span class="tdLine"></span> <span class="textchanger">Buy a milk</span> </td> <td class="ml-auto"> <img src="images/movearrow.png " alt="movearrow" class="move"> <span class="utilites__lines1"></span> <img src="images/pencil.png" alt="chengetext" class="pencil"> <span class="utilites__lines2"></span> <img src="images/trashbox.png" alt="deletetask"> </td> </tr> <tr class="d-flex"> <td> <div class="form-check"> <label for="" class="form-check-label"> <input type="checkbox" class="form-check-input"> </label> </div> </td> <td class="table__task__text"> <span class="notebookLine1 "></span> <span class="notebookLine2 "></span> <span class="tdLine"></span> <span class="textchanger">Call Mam<span> </td> <td class="ml-auto" > <img src="images/movearrow.png " alt="movearrow" class="move"> <span class="utilites__lines1"></span> <img src="images/pencil.png" alt="chengetext" > <span class="utilites__lines2"></span> <img src="images/trashbox.png" alt="deletetask"> </td> </tr> 
 $(document).ready(function(){ $('.pencil').click(function(){ var textarea = $('.textchanger'); var text = prompt("Enter your task", ""); textarea.text(text).children('tbody tr'); }); });

In general, the code works, but the text changes for each td, but it is necessary that it changes only for its own. Pressing the button that changes the text

Actually the result

    1 answer 1

    https://jquery-docs.ru/closest/

     $(document).ready(function(){ $('.pencil').click(function(){ var $textarea = $(this).closest('tr').find('.textchanger'); var $text = prompt("Enter your task", ""); $textarea.text($text); } });