Bring back values in Jquery-tokeninput in editable mode

I am using jquery-tokeninput plugin in application and it is working fine for searching data from database. When submit the data it submitted successfully.

My tables allow dynamically add rows as below.

hidden table for dynamically adding rows

 <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)</td>
<td>@Html.TextBoxFor(m => m.provider_diagnosis_dtls[i].diagnosis_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 add rows dynamically

$("#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'
   });
});

Now when the user open the request form for the first time there will be no row in the diagnosis table. When the user click on button with id N the new row will get added and jquery-tokeninput is added to it successfully. Also able to search the database. Then user submitted the request.

Now the user opened the same request for modification. Now the earlier added rows will come up with data stored in database but here the issue facing is those are coming as text box because I use @Html.TextBoxFor no jquery-tokeninput is there but if user click on the button N the newly added row will have the plugin. How can i attach the plugin to the already available rows also. I'm stucked here.