dynamic table

by Joe

HTML

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<div class="container">
  <div class="row clearfix">
    <div class="col-md-12 table-responsive">
      <table class="table table-bordered table-hover table-sortable" id="tab_logic">
        <thead>
          <tr>
            <th class="text-center">
              Name
            </th>
            <th class="text-center">
              Email
            </th>
            <th class="text-center">
              Notes
            </th>
            <th class="text-center">
              Option
            </th>
            <th class="text-center" style="border-top: 1px solid #ffffff; border-right: 1px solid #ffffff;">
            </th>
          </tr>
        </thead>
        <tbody>
          <tr id='addr0' data-id="addr0" class="hidden">
            <td data-id="name">
              <input type="text" name='name0' id="name0" placeholder='Name' class="form-control" />
            </td>
            <td data-id="mail">
              <input type="text" id="mail" name='mail0' placeholder='Email' class="form-control" />
            </td>
            <td data-id="desc">
              <textarea name="desc0"  id="desc" placeholder="Description" class="form-control"></textarea>
            </td>
            <td data-id="sel">
              <select name="sel0" id="sel">
                <option value="">Select Option</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
              </select>
            </td>
            <td data-id="del">
  ...

CSS

.table-sortable tbody tr {
    cursor: move;
}

JavaScript

$(document).ready(function() {
    $("#add_row").on("click", function() {
        // Dynamic Rows Code
        
        // Get max row id and set new id
        var newid = 0;
        $.each($("#tab_logic tr"), function() {
            if (parseInt($(this).data("id")) > newid) {
                newid = parseInt($(this).data("id"));
            }
        });
        newid++;
        
        var tr = $("<tr></tr>", {
            id: "addr"+newid,
            "data-id": newid
        });
        
        // loop through each td and create new elements with name of newid
        $.each($("#tab_logic tbody tr:nth(0) td"), function() {
            var td;
            var cur_td = $(this);
            
            var children = cur_td.children();
            
            // add new td and element if it has a nane
            if ($(this).data("id") !== undefined) {
                td = $("<td></td>", {
                    "data-id": $(cur_td).data("id")
                });
                
                var c = $(cur_td).find($(children[0]).prop('tagId')).clone().val("");
                c.attr("id", $(cur_td).data("id") + newid);
                c.appendTo($(td));
                td.appendTo($(tr));
            } else {
                td = $("<td></td>", {
                    'text': $('#tab_logic tr').length
                }).appendTo($(tr));
            }
        });
        
        // add delete button and td
        /*
        $("<td></td>").append(
            $("<button class='btn btn-danger glyphicon glyphicon-remove row-remove'></button>")
                .click(function() {
                    $(this).closest("tr").remove();
                })
        ).appendTo($(tr));
        */
        
        // add the new row
        $(tr).appendTo($('#tab_logic'));
        
        $(tr).find("td button.row-remove").on("click", function() {
             $(this).closest("tr").remove();
        });
});




    // Sortable Code
    var fixHelperModified =...