JSFiddle - React, Tailwind, and code Playground

by SAJINA C

HTML

<button class="add">ADD</button>
    
    
    <div id="container">
        <table style="border:1px solid black;">
            <tr>
                <th>ID</th>
                <th>text</th>
                <th>control</th>
                </tr>
        </table>
    </div>


<div id="myModal" style="margin-top:50px;border:1px solid red;height:100px">
    
</div>

JavaScript

counter = 0;

//add
$('.add').click(function(){
    counter++;
   $('#container table').append(
          $('<tr id="'+counter+'">')
           .append($('<td>').html(counter))
           .append($('<td>').html('asd' + counter))
           .append($('<td>').html('<button class="edit">EDIT</button>'))
   );
    
});
//edit
$('.edit').live('click',function(){
    //get id, by a simple method of finding the element
    id = $(this).parents('tr').find('td:first').text();
    
   $('#myModal').html(
       '<div>ID : '+ id +'</div><div>Change text<input type="text" /><button class="change" value="'+id+'">Change</button></div>'
       );
});

//change text
$('.change').live('click',function(){
   //get id via button value
    id = $(this).val();
    //get the closest input text
    new_text = $(this).siblings('input[type="text"]').val();
    
    //find the specific tr that has an id of.. and look for the corresponding td to change, please read about eq() in jquery
    $('#container table').find('tr#' +id).find('td').eq('1').text(new_text);
    
});