---

Demo

---

HTML Table

<div style="padding-left: 50px;padding-right: 50px;padding-top:100px;" class="container">
    <h2 class="text-center">HTML Table</h2>

    <table class="table table-dark table-striped table-hover tbl_code_with_mark">
      <tr>
        <th>Languages</th>
        <th>Expert Names</th>
        <th>Country</th>
        <th>Options</th>
      </tr>
      <tr>
        <td>HTML</td>
        <td>Code With Mark</td>
        <td>USA</td>
        <td>
          <span class="btn btn-sm btn-success btn_row_below_clone">Clone</span> |
          <span class="btn btn-sm btn-success btn_row_below_new">Add New</span> |
          <span class="btn btn-sm btn-danger btn_row_delete">Delete</span>
        </td>
      </tr>
      <tr>
        <td>CSS</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
        <td>
          <span class="btn btn-sm btn-success btn_row_below_clone">Clone</span> |
          <span class="btn btn-sm btn-success btn_row_below_new">Add New</span> |
          <span class="btn btn-sm btn-danger btn_row_delete">Delete</span>
        </td>
      </tr>
      <tr>
        <td>Javascript</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
        <td>
          <span class="btn btn-sm btn-success btn_row_below_clone">Clone</span> |
          <span class="btn btn-sm btn-success btn_row_below_new">Add New</span> |
          <span class="btn btn-sm btn-danger btn_row_delete">Delete</span>
        </td>
      </tr>
      <tr>
        <td>jQuery</td>
        <td>Helen Bennett</td>
        <td>UK</td>
        <td>
          <span class="btn btn-sm btn-success btn_row_below_clone">Clone</span> |
          <span class="btn btn-sm btn-success btn_row_below_new">Add New</span> |
          <span class="btn btn-sm btn-danger btn_row_delete">Delete</span>
        </td>
      </tr>
      <tr>
        <td>PHP</td>
        <td>Yoshi Tannamuri</td>
        <td>Canada</td>
        <td>
          <span class="btn btn-sm btn-success btn_row_below_clone">Clone</span> |
          <span class="btn btn-sm btn-success btn_row_below_new">Add New</span> |
          <span class="btn btn-sm btn-danger btn_row_delete">Delete</span>
        </td>
      </tr>
      <tr>
        <td>Node JS</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
        <td>
          <span class="btn btn-sm btn-success btn_row_below_clone">Clone</span> |
          <span class="btn btn-sm btn-success btn_row_below_new">Add New</span> |
          <span class="btn btn-sm btn-danger btn_row_delete">Delete</span>
        </td>
      </tr>
    </table>

    <div class="text-center">
      <span class="btn btn-sm btn-primary btn_row_add_below_end"> Clone Last Row And Add At End</span>
    </div>

  </div>

 

---

Javascript

 

<script>
  $(document).ready(function($)
  {
    //--->add row at the end > start
    $(document).on('click',".btn_row_add_below_end", function(e)
    {
      var tableBody = $(document).find('.tbl_code_with_mark').find("tbody");
      var trLast = tableBody.find("tr:last");
      var trNew = trLast.clone();
      trLast.after(trNew);
    });
    //--->add row at the end > end


    //--->current row > new > start
    $(document).on('click',".btn_row_below_new", function(e)
    {
      var r = $(this).closest('tr').clone();

      $.each(r.find('td'), function(i1,v1)
      {
        //clear all data/value in td/cell
        $(this).html('');
      });

      $(this).closest('tr').after(r);
    });
    //--->current row > new > end


    //--->current row > clone > start
    $(document).on('click',".btn_row_below_clone", function(e)
    {
      var r = $(this).closest('tr').clone();
      $(this).closest('tr').after(r);
    });
    //--->current row > clone > end

    //--->current row > delete > start
    $(document).on('click',".btn_row_delete", function(e)
    {
      var r = $(this).closest('tr').remove();
    });
    //--->current row > delete > end
    
  });
</script>