insert items in table and Sub table using Jquery

$(function() {

  function addItem(data, table) {
    var row = $("<tr>").data("item", data).appendTo(table);
    $.each(data, function(k, v) {
      $("<td>").html(v).appendTo(row);
    });
    $("<td>").appendTo(row);
    $.each(["update", "cancel", "edit", "delete"], function(i, el) {
      $("<button>", {
        class: "btn btn-sm btn-" + el
      }).html(el[0].toUpperCase() + el.substr(1)).appendTo("td:last", row);
    });
    $(".btn-edit, .btn-update", row).addClass("btn-info");
    $(".btn-cancel", row).addClass("btn-warning");
    $(".btn-delete", row).addClass("btn-danger");
    $("button:lt(2)", row).hide();
  }

  function editItem(row) {
    var item = $(row).data("item");
    var keys = Object.keys(item);
    $("td:not(:last)", row).each(function(i, el) {
      $(el).html(
        $("<input>", {
          name: "item_" + keys[i],
          type: (i < 2) ? "text" : "number",
          value: item[keys[i]]
        })
      );
    });
    $("button", row).show();
    $("button:gt(1)", row).hide();
  }

  function updateItem(row) {
    var newItem = {
      name: $("input[name='item_name']", row).val(),
      desc: $("input[name='item_desc']", row).val(),
      qnty: $("input[name='item_qnty']", row).val()
    };
    var keys = Object.keys(newItem);
    $(row).data("item", newItem);
    $("td:not(:last)", row).each(function(i, el) {
      $(el).empty().html(newItem[keys[i]]);
    });
    $("button", row).show();
    $("button:lt(2)", row).hide();
  }

  $("form").submit(function(e) {
    e.preventDefault();
    var item = {
      name: $("input[name='item']").val(),
      desc: $("input[name='description']").val(),
      qnty: $("input[name='quantity']").val()
    };
    addItem(item, "table.data-table");

    $("input[name='item'], input[name='description'], input[name='quantity']").val('');
  });

  $(".table").on("click", ".btn-delete", function() {
    if (confirm("Are you sure you wish to delete this row?")) {
      $(this).closest("tr").remove();
    }
  });

  $(".table").on("click", ".btn-edit", function() {
    editItem($(this).closest("tr"));
  });

  $(".table").on("click", ".btn-cancel", function() {
    var row = $(this).closest("tr");
    var item = $(row).data("item");
    var keys = Object.keys(item);
    $("td:not(:last)", row).each(function(i, el) {
      $(el).html(item[keys[i]]);
    });
    $("button", row).show();
    $("button:lt(2)", row).hide();
  });

  $("body").on("click", ".btn-update", function() {
    updateItem($(this).closest("tr"));
  });
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<div class="container">
  <form>
    <div class="row align-items-center">
      <div class="col-10">
        <table class="table">
          <tbody>
            <tr>
              <td><input type="text" class="form-control" id='txtCustomerNumb' placeholder="Customer Number" /></td>
              <td><input type="text" class="form-control" id='txtCustomerName' placeholder="Customer Name" /></td>
              <td><input type="text" class="form-control" id='txtDeliverTo' placeholder="Deliver To" /></td>
              <td></td>
            </tr>
            <tr>
              <td><input type="text" class="form-control" id='txtDriverName' placeholder="Driver Name" /></td>
              <td><input type="text" class="form-control" id='txtDriverContact' placeholder="Driver Contact" /></td>
              <td><input type="text" class="form-control" id='txtVehNumber' placeholder="Vehicle No." /></td>
              <td></td>
            </tr>
            <tr>
              <td>
                <select class="form-control" id="txtDeliverTo" placeholder="Exit Point">
                  <option value="">Select Exit Point</option>
                  <option value="Exit_Point_1">Exit Point 1</option>
                  <option value="Exit_Point_2">Exit Point 2</option>
                  <option value="Exit_Point_3">Exit Point 3</option>
                </select>
              </td>
              <td><input type="text" class="form-control" id='txtDeliverTo' placeholder="Deliver To" /></td>
              <td><input type="text" class="form-control" id='txtExitType' placeholder="Type Of Exit" /></td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="col">
        <button class="btn btn-primary" type="submit">Create</button>
      </div>
    </div>
  </form>
</div>
<form>
  <div class="row mb-3">
    <div class="col-2">
      <input type="text" name="item" class="form-control" placeholder="Item Name" required />
    </div>
    <div class="col-4">
      <input type="text" name="description" class="form-control" placeholder="Item Description" required="">
    </div>
    <div class="col-2">
      <input type="number" name="quantity" class="form-control" placeholder="Quantity" required="">
    </div>
    <div class="col">
      <button type="submit" class="btn btn-success save-btn">Add</button>
    </div>
  </div>
</form>
<table class="table table-bordered data-table">
  <thead>
    <th>Name</th>
    <th>Description</th>
    <th>Quantity</th>
    <th>Action</th>
  </thead>
  <tbody>
  </tbody>
</table>