Dynamically generated row details is not posting back

I have two models as below

public partial class provider_preapproval
{
public string encounter_type { get; set; }
public DateTime? e_start_date { get; set; }
public DateTime? e_end_date { get; set; }
public string status { get; set; }
public virtual IList<provider_diagnosis_dtls> provider_diagnosis_dtls { get; set; }
}

public partial class provider_diagnosis_dtls
{
    public string diagnosis_code { get; set; }
    public string diagnosis_desc { get; set; }
    public string diagnosis_level { get; set; }
}

The view for the same is

@using (Html.BeginForm("Preapprove", "Preapproval", FormMethod.Post)
{
 @Html.LabelFor(model => model.encounter_type, htmlAttributes: new { id = "n", @class = "control-label" })                                                
@Html.DropDownListFor(model => model.encounter_type, (SelectList)@ViewBag.Encounter, "---Select Encounter Type ---", new { @class = "m-wrap " 
 @Html.LabelFor(model => model.status, htmlAttributes: new { id = "n", @class = "control-label" })                                                @Html.TextBoxFor(model => model.status, new { id = "status", @Value = "New", @readonly = "readonly" })
 @Html.LabelFor(model => model.e_start_date, htmlAttributes: new { id = "e_start", @class = "control-label " })                                                @Html.TextBoxFor(model => model.e_start_date, new { id = "start", @class = "m-wrap  ", @Value = @TempData["service_date"], @readonly = "readonly" })
 @Html.LabelFor(model => model.e_end_date, htmlAttributes: new { id = "e_end", @class = "control-label " })                                                @Html.TextBoxFor(model => model.e_end_date, new { id = "end", @class = "m-wrap  datepicker", @Value = @TempData["service_date           

//Template for dynamic generating row                         
<table id="Newdiagnosis" style="display:none">
<tr>
<td><input  class="diag" style="width:200px" type="text" name="provider_diagnosis_dtls[#].diagnosis_code" value /></td>
<td><input class="diag_desc" style="width:500px" type="text" name="provider_diagnosis_dtls[#].diagnosis_desc" value /></td>
<td>
<input  type="text" name="provider_diagnosis_dtls[#].diagnosis_level)" readonly value />
<input type="hidden" name="diagnosis.Index" value="%" />
</td>
</tr>
</table>
 <table id="diagnosis" class="table table-striped table-hover table-bordered">
@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>
                                                                                                  @Html.TextBoxFor(m => m.provider_diagnosis_dtls[i].diagnosis_level, new { @Value = "Primary", @readonly = "readonly" })                                                <input type="hidden" name="diagnosis.Index" value="@i" />
                                            </td>
                                        </tr>
}
</table>
}

Now I am able to generate dynamic rows to the table #diagnosis using the jquery and add values but while posting back the "provider_diagnosis_dtls" Ilist inside the "Provider_preapproval" model is coming as null.

The details other than this Ilist is coming.

Please tell me is anything wrong in my code.

Edited

Jquery

 $(document).ready(function () {
 $("#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 html = clone.html();
$("#diagnosis").append(clone.html());
                 $("#diagnosis").find(".diag").last().tokenInput("@Url.Action("SearchDiagnosis","Preapproval")",
                    {
                        theme: 'facebook',
                        preventDuplicates: true,
                        searchingText: 'Searching...',
                        tokenLimit: 1
                    });

       $("#diagnosis").find(".diag_desc").last().tokenInput("@Url.Action("SearchDiagnosis_desc","Preapproval")",
                   {
                      theme: 'facebook',
                      preventDuplicates: true,
                      searchingText: 'Searching...',
                      tokenLimit: 1
                   });

                    });

The hidden input for the indexer in the template has the wrong name (does not match up with your property. It needs to be

<input type="hidden" name="provider_diagnosis_dtls.Index" value="%" /> 

Note you also need to change it in the for loop as well

<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 { @Value = "Primary", @readonly = "readonly" })
        <input type="hidden" name="m.provider_diagnosis_dtls.Index" value="@i" /> // change this
    </td>
</tr>