Dynamically adding rows to an html table, using Javascript
<p>As a beginner MVC programmer I am constantly searching the web for help.  I am trying to dynamically add a row to a HTML table using javascript.  The below code works great, it adds the rows.  The problem is when I return to the controller, the new rows are not there.  If I start with 3 rows of data and add 1 or 2 rows, when I click the submit button it returns with only the original 3 records. Not sure why the below is not returning the new rows I added.  Below is a reduced portion of the code.  </p>

<p>Any help will be greatly appreciated.</p>

<h2>Here is my View.</h2>

<pre><code>@model List&lt;ACES.Models.ENTITY_CONTACTS&gt;

@using (Html.BeginForm("Edit", "Contacts", FormMethod.Post))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    &lt;div class="form-horizontal"&gt;
        &lt;table id="dataTable" class="list-Contacts table-condensed table-striped  table-responsive test"&gt;
            &lt;tr&gt;
                &lt;th class="danger text-center"&gt;
                    &lt;label&gt;Last Name&lt;/label&gt;
                &lt;/th&gt;
                &lt;th class="text-center"&gt;
                    &lt;label&gt;First Name&lt;/label&gt;
                &lt;/th&gt;
                &lt;th class="text-center"&gt;
                    &lt;label&gt;Title&lt;/label&gt;
                &lt;/th&gt;
                &lt;th class="text-center"&gt;
                    &lt;label&gt;EMail Address&lt;/label&gt;
                &lt;/th&gt;

            &lt;/tr&gt;

            @if (Model != null &amp;&amp; Model.Count &gt; 0)
            {
                int j = 0;
                foreach (var i in Model)
                {
                    if (j == 1)
                    {
                        &lt;tr class="contacts-record-template" style="display:none"&gt;

                            &lt;td&gt;
                                @Html.TextBoxFor(a =&gt; a[j].LASTNAME)
                            &lt;/td&gt;
                            &lt;td&gt;
                                @Html.TextBoxFor(a =&gt; a[j].FIRSTNAME)
                            &lt;/td&gt;
                            &lt;td&gt;
                                @Html.TextBoxFor(a =&gt; a[j].TITLE)
                            &lt;/td&gt;
                            &lt;td&gt;
                                @Html.TextBoxFor(a =&gt; a[j].EMAIL, new { @style = "width: 200px;" })
                            &lt;/td&gt;

                        &lt;/tr&gt;
                    }

                    &lt;tr class="contacts-record"&gt;
                        &lt;td&gt;
                            @Html.TextBoxFor(a =&gt; a[j].LASTNAME)
                        &lt;/td&gt;
                        &lt;td&gt;
                            @Html.TextBoxFor(a =&gt; a[j].FIRSTNAME)
                        &lt;/td&gt;
                        &lt;td&gt;
                            @Html.TextBoxFor(a =&gt; a[j].TITLE)
                        &lt;/td&gt;
                        &lt;td&gt;
                            @Html.TextBoxFor(a =&gt; a[j].EMAIL, new { @style = "width: 200px;" })
                        &lt;/td&gt;

                    &lt;/tr&gt;
                    j++;
                }
            }
        &lt;/table&gt;


        @*Display buttons*@
        &lt;input type="button" class="add-button" name="add" value="Add" /&gt;

        &lt;div style="text-align:right"&gt;&lt;a href="#" id="addNew"&gt;Add Contact&lt;/a&gt;&lt;/div&gt;
        &lt;input type="submit" name="submitAction" value="Submit" class="btn btn-primary" onclick="return confirm('Please double check all information before submitting.   Submit Notification?')" /&gt;
    &lt;/div&gt;


}
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}
&lt;script src="~/Scripts/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
&lt;script src="~/Scripts/jquery.validate.min.js"&gt;&lt;/script&gt;
&lt;script src="~/Scripts/jquery.validate.unobtrusive.min.js"&gt;&lt;/script&gt;
&lt;script src="~/Scripts/jquery.maskedinput.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
    $('.phone2').mask('999-999-9999');
    $('.phone').mask('?999-999-9999');


    $(document).ready(function () {
        var count = 0;
        $('.add-button').click(function () {
            count++;
            var template = $('.contacts-record-template').clone()
            template.find('input[type=text]').val(null);
            template.find('input[type=checkbox]').prop('checked', false);
            $.each(template.find('input[type=text]'), function () {
                var name = $(this).attr('name');
                name = name.replace('0', count - 1);
                $(this).attr('name', name);
            });

            $('.list-Contacts').append(template);
            template.removeClass('contacts-record-template').addClass('contacts-record').show();
        })
    });

&lt;/script&gt;
</code></pre>

<hr>

<h2>Controller.</h2>

<pre><code>    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Edit(string submitAction, List&lt;ENTITY_CONTACTS&gt; entity_Contacts)
    {
        if (ModelState.IsValid)
        {
            foreach (var i in entity_Contacts)
            {
                ViewBag.temp = i.LASTNAME;
            }
            db.SaveChanges();
        }
        return View(entity_Contacts);
</code></pre>