How add, delete, edit and save functions will work on multiple tables in HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap Table with Add and Delete Row Feature</title>
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round|Open+Sans"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
      body {
        color: #404e67;
        background: #f5f7fa;
        font-family: "Open Sans", sans-serif;
      }

      .table-wrapper {
        width: 700px;
        margin: 30px auto;
        background: #fff;
        padding: 20px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
      }

      .table-title {
        padding-bottom: 10px;
        margin: 0 0 10px;
      }

      .table-title h2 {
        margin: 6px 0 0;
        font-size: 22px;
      }

      .table-title .add-new {
        float: right;
        height: 30px;
        font-weight: bold;
        font-size: 12px;
        text-shadow: none;
        min-width: 100px;
        border-radius: 50px;
        line-height: 13px;
      }

      .table-title .add-new i {
        margin-right: 4px;
      }

      table.table {
        table-layout: fixed;
      }

      table.table tr th,
      table.table tr td {
        border-color: #e9e9e9;
      }

      table.table th i {
        font-size: 13px;
        margin: 0 5px;
        cursor: pointer;
      }

      table.table th:last-child {
        width: 100px;
      }

      table.table td a {
        cursor: pointer;
        display: inline-block;
        margin: 0 5px;
        min-width: 24px;
      }

      table.table td a.add {
        color: #27c46b;
      }

      table.table td a.edit {
        color: #ffc107;
      }

      table.table td a.delete {
        color: #e34724;
      }

      table.table td i {
        font-size: 19px;
      }

      table.table td a.add i {
        font-size: 24px;
        margin-right: -1px;
        position: relative;
        top: 3px;
      }

      table.table .form-control {
        height: 32px;
        line-height: 32px;
        box-shadow: none;
        border-radius: 2px;
      }

      table.table .form-control.error {
        border-color: #f50000;
      }

      table.table td .add {
        display: none;
      }
    </style>
    <script type="text/javascript">
      $(document).ready(function () {
        $('[data-toggle="tooltip"]').tooltip();
        var actions = $("table td:last-child").html();
        // Append table with add row form on add new button click
        $(".add-new").click(function () {
          $(this).attr("disabled", "disabled");
          var index = $("table tbody tr:last-child").index();
          var row =
            "<tr>" +
            '<td><input type="text" class="form-control" name="current shift" id="cur_shft"></td>' +
            '<td><input type="text" class="form-control" name="name current" id="n_curr"></td>' +
            '<td><input type="text" class="form-control" name="shift handedover" id="shft_hndover"></td>' +
            '<td><input type="text" class="form-control" name="name next" id="n_next"></td>' +
            '<td><input type="text" class="form-control" name="time" id="shft_time"></td>' +
            "<td>" +
            actions +
            "</td>" +
            "</tr>";
          $("table").append(row);
          $("table tbody tr")
            .eq(index + 1)
            .find(".add, .edit")
            .toggle();
          $('[data-toggle="tooltip"]').tooltip();
        });
        // Add row on add button click
        $(document).on("click", ".add", function () {
          var empty = false;
          var input = $(this).parents("tr").find('input[type="text"]');
          input.each(function () {
            if (!$(this).val()) {
              $(this).addClass("error");
              empty = true;
            } else {
              $(this).removeClass("error");
            }
          });
          $(this).parents("tr").find(".error").first().focus();
          if (!empty) {
            input.each(function () {
              $(this).parent("td").html($(this).val());
            });
            $(this).parents("tr").find(".add, .edit").toggle();
            $(".add-new").removeAttr("disabled");
          }
        });
        // Edit row on edit button click
        $(document).on("click", ".edit", function () {
          $(this)
            .parents("tr")
            .find("td:not(:last-child)")
            .each(function () {
              $(this).html(
                '<input type="text" class="form-control" value="' +
                  $(this).text() +
                  '">'
              );
            });
          $(this).parents("tr").find(".add, .edit").toggle();
          $(".add-new").attr("disabled", "disabled");
        });
        // Delete row on delete button click
        $(document).on("click", ".delete", function () {
          $(this).parents("tr").remove();
          $(".add-new").removeAttr("disabled");
        });
      });
    </script>
  </head>

  <body>
    <div class="container">
      <div class="table-wrapper">
        <div class="table-title">
          <div class="row">
            <div class="col-sm-8">
              <h2><b>Shift Information</b></h2>
            </div>
            <div class="col-sm-4">
              <button type="button" class="btn btn-info add-new">
                <i class="fa fa-plus"></i> Add New
              </button>
            </div>
          </div>
        </div>
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>Current Shift</th>
              <th>Associates in Current Shift</th>
              <th>Shift Handedover to</th>
              <th>Associates in Next shift</th>
              <th>Shift Handover time</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>First</td>
              <td>Chandu</td>
              <td>Second</td>
              <td>Venkata</td>
              <td>15:30</td>
              <td>
                <a class="add" title="Add" data-toggle="tooltip"
                  ><i class="material-icons">&#xE03B;</i></a
                >
                <a class="edit" title="Edit" data-toggle="tooltip"
                  ><i class="material-icons">&#xE254;</i></a
                >
                <a class="delete" title="Delete" data-toggle="tooltip"
                  ><i class="material-icons">&#xE872;</i></a
                >
              </td>
            </tr>
            <tr>
              <td>Second</td>
              <td>Venkata</td>
              <td>Third</td>
              <td>Mallikharjuna</td>
              <td>23:00</td>
              <td>
                <a class="add" title="Add" data-toggle="tooltip"
                  ><i class="material-icons">&#xE03B;</i></a
                >
                <a class="edit" title="Edit" data-toggle="tooltip"
                  ><i class="material-icons">&#xE254;</i></a
                >
                <a class="delete" title="Delete" data-toggle="tooltip"
                  ><i class="material-icons">&#xE872;</i></a
                >
              </td>
            </tr>
            <tr>
              <td>Third</td>
              <td>Mallikharjuna</td>
              <td>First</td>
              <td>Saikiran</td>
              <td>06:30</td>
              <td>
                <a class="add" title="Add" data-toggle="tooltip"
                  ><i class="material-icons">&#xE03B;</i></a
                >
                <a class="edit" title="Edit" data-toggle="tooltip"
                  ><i class="material-icons">&#xE254;</i></a
                >
                <a class="delete" title="Delete" data-toggle="tooltip"
                  ><i class="material-icons">&#xE872;</i></a
                >
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </body>
</html>