JSFiddle - React, Tailwind, and code Playground

by Yuvaraj K

HTML

<button type="button" class="btn btn-primary" id="add_new_row">Add new row</button>
<table class="table table-hover" id="people_table">
   <tr>
    <th>Name</th>
    <th>Surname</th>
    <th>Age</th>
    <th>Modify</th>
   </tr>
   {% for person in people %}
   <tr>
     <td>{{ person[1] }}</td>
     <td>{{ person[2] }}</td>
     <td>{{ person[3] }}</td>
     <td><button type="button" class="btn btn-success" id="change_{{ person[0] }}">Change</button></td>
   </tr>
   {% endfor%}
</table>

JavaScript

$("#add_new_row").click(function() {
    console.log("***");
    $('table#people_table').append('<tr><td>Dima</td><td>Petrov</td><td>30</td><td><button type="button" class="btn btn-success" id="change_4">Change</button></td></tr>');
addNewRow();
  });

  function addNewRow()
  {
   $("button[id^='change_']").click(function() {
    alert('click')
  });
  }