when adding new rows dynamically two rows getting added to the table in MVC

Question

In my MVC is a table two which we can add rows dynamically. I have two forms. first form is for adding new request and the adding the rows dynamically is functioning with out any issue and able to submit it successfully.

Second form is opening an exiting request and modify. I have attached jquery input token to textboxes. I am able to show the existing values in the request. But when i click on the button to add new row it is adding two rows as shown in the image below

here first two rows are existing one and when i click new button the third row came. I, pretty sure it is because of issue in attaching the jquery input token because in Diagnosis Type is missing in the additional row

Please find the codes i used for achieving these scenario

Dynamic template

<table id="Newdiagnosis" style="display:none">
  <tr>
    <td><input id="diag-%" class="diag" style="width:200px" type="text" name="provider_diagnosis_dtls[#].diagnosis_code" value /></td>
    <td><input id="desc-%"  class="diag_desc" style="width:500px" type="text" name="provider_diagnosis_dtls[#].diagnosis_desc" value /></td>
    <td>
      <input id ="level-%" type="text"name="provider_diagnosis_dtls[#].diagnosis_level" readonly value />
      <input type="hidden" name="provider_diagnosis_dtls.Index" value="%" />
    </td>
  </tr>
</table>

Actual Table

<table id="diagnosis" >
  <tr>
    <th style="width:200px">Diagnosis Code</th>
    <th style="width:500px">Diagnosis Description</th>
    <th>Diagnosis Type</th>
    <th style="width:6px"></th>
  </tr>
  @if (Model != null)
  {
   for (int i = 0; i < Model.provider_diagnosis_dtls.Count; i++)
   {
     <tr>
       <td>@Html.TextBoxFor(m => m.provider_diagnosis_dtls[i].diagnosis_code, new { @class "diag")</td>
       <td>@Html.TextBoxFor(m => m.provider_diagnosis_dtls[i].diagnosis_desc, new { @class "diag_desc")</td>
       <td>
         @Html.TextBoxFor(m => m.provider_diagnosis_dtls[i].diagnosis_level,new { @readonly = "readonly" })
         <input type="hidden" name="provider_diagnosis_dtls.Index" value="@i" />
       </td>
     </tr>
   }
 }

Jquery

$(document).ready(function () {
  //to assign and attach jquery token input to existing rows class diag
  $('.diag').each(function () {
    $(this).tokenInput("@Url.Action("SearchDiagnosis","Preapproval")",
    {
      prePopulate: [{ id: $(this).val(), name: $(this).val() }],
      theme: 'facebook',
      preventDuplicates: true,
      searchingText: 'Searching diagnosis code...',
      tokenLimit: 1,
      hintText: 'Diagnosis Code'
    });
  });
  //to assign and attach jquery token input to existing rows class diag_desc
  $('.diag_desc').each(function () {
    $(this).tokenInput("@Url.Action("SearchDiagnosis_desc", "Preapproval")",
    {
      prePopulate: [{ id: $(this).val(), name: $(this).val() }],
      theme: 'facebook',
      preventDuplicates: true,
      searchingText: 'Searching diagnosis desc...',
      tokenLimit: 1,
      hintText: 'Diagnosis desc'
    });
  });

  // Button click for adding new rows          
  $("#N").click(function () {
    var index = (new Date()).getTime();
    var clone = $('#Newdiagnosis').clone();
    clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));
    clone.html($(clone).html().replace(/"%"/g, '"' + index + '"'));
    clone.html($(clone).html().replace(/"token-input-diag-%"/g, 'token-input-diag-' + index));
    clone.html($(clone).html().replace(/"token-input-desc-%"/g, 'token-input-desc-' + index));
    clone.html($(clone).html().replace(/"diag-%"/g, 'diag-' + index));
    clone.html($(clone).html().replace(/"desc-%"/g, 'desc-' + index));
    clone.html($(clone).html().replace(/"level-%"/g, 'level-' + index));
    var html = clone.html();
    $("#diagnosis").append(clone.html()); 
    $("#diagnosis").find(".diag").last().tokenInput("@Url.Action("SearchDiagnosis","Preapproval")",
    {
      theme: 'facebook',
      preventDuplicates: true,
      searchingText: 'Searching diagnosis code...',
      tokenLimit: 1,
      hintText: 'Diagnosis Code'
    });
    $("#diagnosis").find(".diag_desc").last().tokenInput("@Url.Action("SearchDiagnosis_desc","Preapproval")",
    {
      theme: 'facebook',
      preventDuplicates: true,
      searchingText: 'Searching diagnosis desc...',
      tokenLimit: 1,
      hintText: 'Diagnosis Description'
    });
    if (index1 == 1) {
      $("#diagnosis").find("#level-" + index).val("Primary");
      $("#diagnosis").find("#diag_delete").attr("disabled", true)
    } else
      $("#diagnosis").find("#level-" + index).val("Secondary");
  });
});

Edited

If I remove

$("#diagnosis").find(".diag").last().tokenInput("@Url.Action("SearchDiagnosis","Preapproval")",
        {
        theme: 'facebook',
        preventDuplicates: true,
        searchingText: 'Searching diagnosis code...',
        tokenLimit: 1,
        hintText: 'Diagnosis Code'
        });
      $("#diagnosis").find(".diag_desc").last().tokenInput("@Url.Action("SearchDiagnosis_desc","Preapproval")",
        {
        theme: 'facebook',
        preventDuplicates: true,
        searchingText: 'Searching diagnosis desc...',
        tokenLimit: 1,
        hintText: 'Diagnosis Description'
        });

from the button click function i will get picture like below but here a default null name is displaying the third row and im not able delete it by clicking the token plugin

Answer 1

There are a few issues with your code, but the primary one is that first 2 scripts - $('.diag').each(function () { and $('.diag_desc').each(function () { - are assigning the plugin to all elements with class names diag and diag_desc, including the ones in the hidden template used to generate the new row. You need exclude the template when initially attaching the plugin to the textboxes.

There are also a few other minor issues and your script for adding the new row should be

var table = $("#diagnosis"); // cache it
var newTable = $('#Newdiagnosis'); // cache it
$("#N").click(function () {
  var index = (new Date()).getTime();
  var clone = $('#Newdiagnosis').clone();
  clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));
  clone.html($(clone).html().replace(/"%"/g, '"' + index + '"'));
  var newrow = clone.find('tr');
  table.append(newrow);
  newrow.find('.diag').first().tokenInput('@Url.Action("SearchDiagnosis","Preapproval")', {
    prePopulate: [{id:$(this).val(), name: $(this).val()}],
    theme: 'facebook',
    searchingText: 'Searching diagnosis code...',
    tokenLimit: 1,
    hintText: 'Diagnosis Code'
  });
  // repeat for newrow.find('.diag_desc').....
});

and remove the id attributes from the template. Note that the last script

if (index1 == 1) {
  $("#diagnosis").find("#level-" + index).val("Primary");
  $("#diagnosis").find("#diag_delete").attr("disabled", true)
} else {
  $("#diagnosis").find("#level-" + index).val("Secondary");
}

could not currently work - there is no variable named index1. Not entirely sure what your trying to do with this, but assuming you want to apply "Primary" to the new row if its the first row in the table, otherwise "Secondary", then it would be better to modify the template to

<input type="text"name="provider_diagnosis_dtls[#].diagnosis_level" class="level" readonly value="Secondary" />

Then the script would be

var rowCount = table.find('tr').length;
if(rowCount == 1) {
  table.find('.level').first().val("Primary");
}

Note: Could not find any element with id="diag_delete" so not sure what that is (perhaps you just ommited it in the question), but if its an element in each row then don't use an id attribute (duplicate id are invalid html), use a class name instead