Adding rows dynamically to 2 different tables in the same HTML


I am struggling to add rows to 2 different tables dynamically. While it works well for the first table, I am not able to replicate the same for the 2nd one. I know it has probably something to do with JS but I am not able to figure out the exact mistake.

Since you cannot use same id for different elements, I have changed the ids in JS. Should I use class instead of id? If so how do I do that exactly?

$(document).ready(function() {
  $("#add_badge").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 cur_td = $(this);

      var children = cur_td.children();

      // add new td and element if it has a nane
      if ($(this).data("name") != undefined) {
        var td = $("<td></td>", {
          "data-name": $(cur_td).data("name")
        });

        var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val("");
        c.attr("name", $(cur_td).data("name") + newid);
        c.appendTo($(td));
        td.appendTo($(tr));
      } else {
        var 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 = function(e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();

    $helper.children().each(function(index) {
      $(this).width($originals.eq(index).width())
    });

    return $helper;
  };

  $(".table-sortable tbody").sortable({
    helper: fixHelperModified
  }).disableSelection();

  $(".table-sortable thead").disableSelection();



  $("#add_badge").trigger("click");
});


$(document).ready(function() {
  $("#add_tier").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 cur_td = $(this);

      var children = cur_td.children();

      // add new td and element if it has a nane
      if ($(this).data("name") != undefined) {
        var td = $("<td></td>", {
          "data-name": $(cur_td).data("name")
        });

        var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val("");
        c.attr("name", $(cur_td).data("name") + newid);
        c.appendTo($(td));
        td.appendTo($(tr));
      } else {
        var 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 = function(e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();

    $helper.children().each(function(index) {
      $(this).width($originals.eq(index).width())
    });

    return $helper;
  };

  $(".table-sortable tbody").sortable({
    helper: fixHelperModified
  }).disableSelection();

  $(".table-sortable thead").disableSelection();



  $("#add_tier").trigger("click");
});
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

<!-- Custom styles for this template -->


<link href="dashboard.css" rel="stylesheet">


<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->



<!-- Bootstrap core JavaScript
    ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script>
  window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')
</script>


<script src="../../dist/js/bootstrap.min.js"></script>
<script src="dyn.js"></script>



<div class="jumbotron">
  <div class="container">
    <div class="row clearfix">
      <div class="col-md-12 column">
        <table class="table table-bordered table-hover" id="tab_logic">
          <thead>
            <tr>

              <th class="text-center">
                Badge Name
              </th>
              <th class="text-center">
                Badge ID
              </th>
              <th class="text-center">
                Points required to earn the badge
              </th>

            </tr>
          </thead>
          <tbody>
            <tr id='addr0'>

              <td data-name="badge_name">
                <input type="text" name='badge_name0' placeholder='For ex: Fashion Queen' class="form-control" />
              </td>
              <td data-name="badge_id">
                <input type="number" name='badge_id0' placeholder='For ex: 873200' class="form-control" />
              </td>
              <td data-name="badge_points">
                <input type="number" name='badge_points0' placeholder='For ex: 500' class="form-control" />
              </td>
              <td data-name="del">
                <button nam "del0" class='btn btn-danger glyphicon glyphicon-remove row-remove'></button>
              </td>

            </tr>

          </tbody>
        </table>
      </div>
    </div>
    <a id="add_badge" class="btn btn-default pull-left">Create new badge</a>
  </div>

  <div class="container">
    <div class="row clearfix">
      <div class="col-md-12 column">
        <table class="table table-bordered table-hover" id="tab_logic">
          <thead>
            <tr>

              <th class="text-center">
                Tier Name
              </th>
              <th class="text-center">
                Tier ID
              </th>
              <th class="text-center">
                Points required to earn the tier
              </th>

            </tr>
          </thead>
          <tbody>
            <tr id='addr0'>

              <td data-name="tier_name">
                <input type="text" name='tier_name0' placeholder='For ex: Gold' class="form-control" />
              </td>
              <td data-name="tier_id">
                <input type="number" name='tier_id0' placeholder='For ex: 873200' class="form-control" />
              </td>
              <td data-name="tier_points">
                <input type="number" name='tier_points0' placeholder='For ex: 500' class="form-control" />
              </td>
              <td data-name="del">
                <button nam "del0" class='btn btn-danger glyphicon glyphicon-remove row-remove'></button>
              </td>

            </tr>

          </tbody>
        </table>
      </div>
    </div>
    <a id="add_tier" class="btn btn-default pull-left">Create new tier</a>
  </div>

You have used id="tab_logic" two times, Please use diff class.


You must use different id selector for tables as for first table id="tab_logic1" and for second table id="tab_logic".

You must create function addRows(selector,data){} and use:

addRows('tab_logic1',data);
addRows('tab_logic2',data);