Как пройти увеличение

Question

У меня есть таблица, и я клонирую строки, чтобы добавить новую строку. Мой <td id> также увеличивается. Моя проблема заключается в том, что, хотя значение каждого <td id> увеличивается, когда значение переходит от одного экрана к следующему, <td id> будет выглядеть следующим образом

<flddesc> Val1 <flddesc>

<flddesc> Val2 <flddesc>

Я перепробовал несколько вещей, но не повезло И теперь я понятия не имею, почему это так. Так как я все еще учусь jQuery и JS, пожалуйста, go не волнуйтесь. Любая помощь или предложение будут оценены. Спасибо

var regex = /^([a-zA-Z0-9 _-]+)$/;
var cindex = 0;
var counter = 0;
var quicklink = '';
$(document).on('click', '.Buttons', function(addrow) {
  if (counter == '5') {
    alert('Maximum limit reached');
    return false;
  }
  var count = $('table tr:last input:text').filter((_, el) => el.value.trim() == "").length;

  if (count || !$('.id_100 option[value=description]').attr('selected', 'selected')) {
    {
      alert("Please fill the current row");
      return false;
    }
  }

  var $tr = $('#dataTable tbody tr:last');
  var $clone = $tr.clone(true);
  $('.DeleteButton').prop('disabled', false);
  cindex++;
  $clone.find('input:text').val('').attr('disabled', true);
  $clone.find('input:button').attr('disabled', true);
  $clone.attr('id', 'id' + (cindex)); //update row id if required
  //update ids of elements in row
  $clone.find("*").each(function() {
    var id = this.id || "";
    if (id != "") {

      var match = id.match(regex) || [];
      if (match.length == 2) {
        this.id = this.name + (cindex);
      }
    }
  });
  $tr.after($clone);
  counter++;

});

function disableField(e)
{ var Count = $('#dataTable tr').length;
    if (Count == 2){
	$(e).closest('tr').find("input").not('.DeleteButton').prop('disabled', false);
        
    }else{
	$(e).closest('tr').find("input").prop('disabled', false);
}}

 $(document).on("click", '.DeleteButton', function() {
     $(this).closest("tr").remove();
	
	 counter--;
	 var Count1 = $('#dataTable tr').length;
	 if (Count1 == 2){
	 $('.DeleteButton').prop('disabled', true);
	 }
	 
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0" cellspacing="1" cellpadding="1" id="dataTable" name="dataTable" class="graphtable">
  <thead>

    <tr>
      <td class="headingalign" width="16%">Links</td>
      <td class="headingalign" width="32%">Desciption</td>
      <td class="headingalign" width="16%">Image</td>
      <td class="headingalign" width="16%">URL</td>
      <td class="headingalign" width="05%"></td>

    </tr>
  </thead>
  <tbody>

    <tr id="id0" class="vals" name="id0">

      <td>
        <div class="id_100">
          <select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField(this)">
            <option value="">Select</option>
            <option value="L">Latest Offer</option>
             <option value="G">Guides</option>
          
          </select>
        </div>
      </td>
      <td>
        <input id="flddesc" name="flddesc" maxlength="500" disabled="true" class="objinputtext1" size="85" value="" />

      </td>
      <td>
        <input id="fldimg" name="fldimg" maxlength="50" disabled="true" class="objinputtext2" size="45" value="" />

      </td>
      <td>
        <input id="fldurl" name="fldurl" maxlength="55" disabled="true" class="objinputtext3" size="40" value="" />

      </td>
      <td>
        <input tabindex="6" value="Delete Row" disabled="true" class="DeleteButton" type="button" />
      </td>
    </tr>
  </tbody>
</table>
<div class="buttonarea">
  <ul>
    <li><input tabindex="6" id="Button3" value="Add New Row" class="Buttons" name="Button3" type="button" /></li>
	 <li><input tabindex="6" id="Button5" value="Initiate" class="buttons" name="Button5" type="button" onclick="return fnOnSubmit();"/></li>
	 			

  </ul>
 
</div>