JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row-fluid">
  <div class="btn-group">
    <button class="btn btn-primary action-add-visual-feature"> + new visual feature </button>
    <button class="btn btn-danger action-remove-visual-features"> Remove all features</button>
  </div>
</div>



<div class="row-fluid">
  <table class="table table-striped" id="table-visual-features">
    <thead>
      <tr>
        <th>Visual Feature</th>
        <th>Type [currently not used]</th>
        <th>Description</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

JavaScript

$('#table-visual-features tbody').on('click', '.action-change', function() {
  $(this).attr('class', 'save').html('Save');
  $(this).parent().siblings('td:eq(0)').html('<input type="text" id="new_visual"/>');
  $(this).parent().siblings('td:eq(1)').html('<input type="text" id="new_type"/>');
  $(this).parent().siblings('td:eq(2)').html('<input type="text" id="new_desc"/>');
});

$('#table-visual-features tbody').on('click', '.save', function() {
  $(this).attr('class', 'action-change').html('Edit');
  var new_visual = $('#new_visual').val();
  var new_type = $('#new_type').val();
  var new_desc = $('#new_desc').val();
  $(this).parent().siblings('td:eq(0)').html('<td>' + new_visual + '</td>');
  $(this).parent().siblings('td:eq(1)').html('<td>' + new_type + '</td>');
  $(this).parent().siblings('td:eq(2)').html('<td>' + new_desc + '</td>');
});






$('.action-remove-visual-features').on('click', function() {
  console.log("action-remove-visual-features");
  $('#table-visual-features tbody').html('');
});


$('.action-add-visual-feature').on('click', function() {
  console.log("action-add-visual-feature");

  $('#table-visual-features tbody').append('<tr><td>x</td><td>Numeric</td><td>Values to be mapped to the x-axis</td><td><button class="action-change">edit</button> <button class="btn btn-mini btn-danger action-remove-visual-feature">remove</button></td></tr>');
});


$('#table-visual-features tbody').on('click', 'tr button.action-remove-visual-feature', function(e) {
  console.log("action-remove-visual-feature!!");
  console.log("e action  = ", e);
  $(this).parents('tr').remove();
});