Add row in the same table

Question

I'm able to add a whole table but now i want to add a subtitle into the same table by clicking a button. But i have do many research still unable to find a solution. I have learnt jquery around 5 months anyone can help? Attach below is the HTML and jquery code of adding a table but unable to add the row.

$("#add_btn").click(function() {
  var tablecount = "";
  $("#clone_table").children("table").each(function() {
    tablecount = $(this).attr("id");
  });

  var tableid = tablecount.split("_");
  var dicisplineno = parseInt(tableid[1]) + 1;

  //$('.NewTable').detach();
  var $clone = $('#D4_1').clone(true).addClass('NewTable');
  $clone.attr("id", "D4_" + dicisplineno);
  $clone.find(".column1").text("4." + dicisplineno);
  $clone.find("#cancel_btn").append("<button type='button' name='x_btn' class = 'xx_btn' id = 'x_btn'>-</button>");
  $('#clone_table').append($clone);
});

//$(".xx_btn").click(function()
$('table').on('click', '.xx_btn', function() {
  $(this).parents("table").remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form enctype="multipart/form-data" id="user_form3">

  <table style="width:100%;" id="D4">
    <tr>
      <th id="th"> Discipline 4 : Failure Analysis</th>
    </tr>
  </table>

  <button type="button" name="add_btn" id="add_btn">+</button>

  <div id="clone_table">
    <table style="width: 100%;" id="D4_1">

      <tr>
        <th class="column1" style="width: 5%;">4.1</th>
        <th style="width: 45%;"><input type="text" id="title1" autocomplete="off"></th>
        <th style="width: 50%;">Attachment <span id="cancel_btn"></span></th>
      </tr>

      <tr>
        <th style="width: 5%;"></th>
        <th style="width: 45%;"><input type="text" id="subtitle1" autocomplete="off"></th>
      </tr>

      <tr>
        <td></td>
        <td><textarea name="txtarea_a" id="txtarea4_1a" cols="50" rows="5" autocomplete="off"></textarea></td>

        <td>

          <div id='upload-form4_1'>
            <table class="table table-bordered" id="dynamic_field4_1">
              <tr>
              </tr>
            </table>
            <div id="file4_1">
              <input class='file-inputt1' type='file' id='file4_1a' name='file_1[]' onchange="ValidateSingleInput2(this);selectFile2(this);" accept="application/pdf,application/vnd.ms-excel,application/msword,application/vnd.ms-powerpoint">
              <!---->
            </div>
          </div>
          <input type="file" name="file_1[]" id="fileToUpload4_1" onchange="ValidateSingleInput(this);" multiple="multiple" style="display: none;">
          <input type="button" value="Images" onclick="document.getElementById('fileToUpload4_1').click();" />
          <div id="preview4_1"></div>
        </td>
      </tr>
    </table>
  </div>
  </table>
</form>

An error after i have a try :

$("#add_btn").click(function()
{
    var tablecount = "";
    $("#D4_1").children("tr").each(function() { 
        tablecount = $(this).attr("id");
    });

    var tableid = tablecount.split("_");
    var dicisplineno = parseInt(tableid[1]) + 1;

    //$('.NewTable').detach();
    var $clone = $('#subtitle_1').clone(true).addClass('NewTable');
        $clone.attr("id", "subtitle_" + dicisplineno);
        $clone.find(".column1").text("4." + dicisplineno);
        $clone.find("#cancel_btn").append("<button type='button' name='x_btn' class = 'xx_btn' id = 'x_btn'>-</button>");
    $('#clone_table').append($clone);
});

//$(".xx_btn").click(function()
$('table').on('click', '.xx_btn', function()
{
    $(this).parents("table").remove();
});

Answer 1

Something like this?

Note IDs need to be unique so I made them unique

$("#add_btn").on("click", function() {
  var tablecount = "";
  $("#clone_table").children("table").each(function() {
    tablecount = $(this).attr("id");
  });

  var tableid = tablecount.split("_");
  var dicisplineno = parseInt(tableid[1]) + 1;

  //$('.NewTable').detach();
  var $clone = $('#D4_1').clone(true).addClass('NewTable');
  $clone.attr("id", "D4_" + dicisplineno);
  $clone.find(".column1").text("4." + dicisplineno);
  $clone.find("#cancel_btn").append("<button type='button' name='x_btn' class = 'xx_btn' id = 'x_btn'>-</button>");
  $clone.find("[id]").each(function() {
    let id = $(this).attr("id"), idx = id.match(/\d+/)
    const newId = id.replace(idx,(++idx)); 
    $(this).attr("id",newId); 
  })
  $('#clone_table').append($clone);
});
$("#add_sub_btn").on("click",function() {
  $("[id^=subtitle]").each(function() {
    let id = $(this).attr("id"), idx = id.match(/\d+/)
    const newId = id.replace(idx,(++idx)); 
    const $inp = $(this).clone(true).attr("id",newId)
    $(this).parent().append("<br/>").append($inp)
    
  })
})

//$(".xx_btn").click(function()
$('table').on('click', '.xx_btn', function() {
  $(this).parents("table").remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form enctype="multipart/form-data" id="user_form3">

  <table style="width:100%;" id="D4">
    <tr>
      <th id="th"> Discipline 4 : Failure Analysis</th>
    </tr>
  </table>

  <button type="button" name="add_btn" id="add_btn">+</button>
  <button type="button" name="add_sub_btn" id="add_sub_btn">subtitle</button>

  <div id="clone_table">
    <table style="width: 100%;" id="D4_1">

      <tr>
        <th class="column1" style="width: 5%;">4.1</th>
        <th style="width: 45%;"><input type="text" id="title1" autocomplete="off"></th>
        <th style="width: 50%;">Attachment <span id="cancel_btn"></span></th>
      </tr>

      <tr>
        <th style="width: 5%;"></th>
        <th style="width: 45%;"><input type="text" id="subtitle1" autocomplete="off"></th>
      </tr>

      <tr>
        <td></td>
        <td><textarea name="txtarea_a" id="txtarea4_1a" cols="50" rows="5" autocomplete="off"></textarea></td>

        <td>

          <div id='upload-form4_1'>
            <table class="table table-bordered" id="dynamic_field4_1">
              <tr>
              </tr>
            </table>
            <div id="file4_1">
              <input class='file-inputt1' type='file' id='file4_1a' name='file_1[]' onchange="ValidateSingleInput2(this);selectFile2(this);" accept="application/pdf,application/vnd.ms-excel,application/msword,application/vnd.ms-powerpoint">
              <!---->
            </div>
          </div>
          <input type="file" name="file_1[]" id="fileToUpload4_1" onchange="ValidateSingleInput(this);" multiple="multiple" style="display: none;">
          <input type="button" value="Images" onclick="document.getElementById('fileToUpload4_1').click();" />
          <div id="preview4_1"></div>
        </td>
      </tr>
    </table>
  </div>
</form>