Dynamic Adding data and show in list

Add data and show temporaly in below grid and save data show in below list during final click on SaveData

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>


<h2>Index</h2>

<div class="row" >
    <div class="col-md-12">
        <div class="col-md-2">@Html.Label("Fname", "First name", new { style = "width:110px" })</div>
        <div class="col-md-2">@Html.Label("Lname", "Last name", new { style = "width:110px" })</div>
        <div class="col-md-2">
            @Html.Label("Gender", "Gender", new { style = "width:110px" })
        </div>
        <div class="col-md-2">
         
            @Html.Label("Status", "Status", new { style = "width:110px" })
        </div>
       
       
    </div>
</div>
<div id="mainDiv">
    <div class="row" id="child">
        <div class="col-md-12">
            <div class="col-md-2">@Html.TextBox("Fname", null, new { style = "width:110px" })</div>
            <div class="col-md-2">@Html.TextBox("Lname", null, new { style = "width:110px" })</div>
            <div class="col-md-2">
                @Html.DropDownList("Gender", new List<SelectListItem> { new SelectListItem() { Text = "Male", Value = "Male" }, new SelectListItem { Text = "feMale", Value = "FeMale" }, new SelectListItem { Text = "Select Gender", Value = "Select Gender" } }, "Select Gender")

            </div>
            <div class="col-md-2">
                @*<input type="checkbox" id="Status" style = "width:110px" />*@
                @Html.CheckBox("Status", isChecked: false)
            </div>
            <div class="col-md-3">
                <button id="save" onclick="AddRow()">Add</button>
                <button id="update" onclick="updateRow()" style="display:none">Update</button>
            </div>
        </div>
    </div>
 
</div>
<div class="row">
    <button id="SaveData" onclick="save()" style="margin-top: 25px;margin-left: 29px;">
        SaveData
    </button>

</div>
<script>
    var id = 0;

    function addElement(parentId, elementTag, elementId, html) {
        // Adds an element to the document
        debugger;
        var p = document.getElementById(parentId);
        var exNode = document.getElementById("child");
        var newElement = document.createElement(elementTag);
        newElement.setAttribute('id', elementId);
        newElement.innerHTML = html;     
        p.insertBefore(newElement, exNode);
   
    }

    function AddRow() {
        id++;
        debugger;
        var elementId = "Child" + id;
        window.localStorage.setItem("id", id);
        var newElement = (" <div class='col-md-12'>" +
           "<div class='col-md-2' id='First" + id + "'>" + $("#Fname").val() + "</div>" +
           "<div class='col-md-2'  id='Second" + id + "'>" + $("#Lname").val() + "</div>" +
           "<div class='col-md-2'id='Gender" + id + "'>" + $("#Gender").val() + "</div>" +
            "<div class='col-md-2'id='Status" + id + "'>" + $("#Status").is(":checked") + "</div>" +
           "<div class='col-md-1'><button id='remove'  onclick='removeElement(Child" + id + ")'>Remove</button></div>" +
           "<div class='col-md-2'><button id='Edit'  onclick='editElement(Child" + id + ")'>Edit</button></div>" +
       "</div>");
        var elementTag = "div";
        addElement("mainDiv", elementTag, elementId, newElement)
        // $("#child").before(newElement);
        $("#Fname").val("")
        $("#Lname").val("")
        $("#Gender").val("Select Gender")
        $("#Status").value = false

    }
    function removeElement(elementId) {
        // Removes an element from the document
        var element = document.getElementById(elementId.id);
        element.parentNode.removeChild(element);
    }
    function editElement(elementId) {
        debugger;
        window.localStorage.setItem("childElementId", elementId.id);
        var id = window.localStorage.getItem("id");
        var fn = document.getElementById("First" + id).innerText;
        var sc = document.getElementById("Second" + id).innerText;
        var gn = document.getElementById("Gender" + id).innerText;
        var stn = document.getElementById("Status" + id).innerText;
        $("#Fname").val(fn);
        $("#Lname").val(sc);
        $("#Gender").val(gn);
        $("#Status").val(stn);
        $("#save").hide();
        $("#update").show();

    }
    function updateRow() {
        debugger;
        var updatedRowId = window.localStorage.getItem("childElementId");
        var id = updatedRowId.substr(5);
        document.getElementById("First" + id).innerText = $("#Fname").val();
        document.getElementById("Second" + id).innerText = $("#Lname").val();
        document.getElementById("Gender" + id).innerText = $("#Gender").val();
        document.getElementById("Status" + id).innerText = $("#Status").val();
        $("#Fname").val("")
        $("#Lname").val("")
        $("#Gender").val("Select Gender")
        $("#Status").val(false)

        $("#save").show();
        $("#update").hide();
    }
    function save() {
        var id = window.localStorage.getItem("id");
        var fname = "", lname = "", gender = "", status = "";
        for (var i = 1; i <= id; i++) {
            fname = fname +","+ document.getElementById("First" + i).innerText;
            lname = lname +","+ document.getElementById("Second" + i).innerText;
            gender = gender + ","+document.getElementById("Gender" + i).innerText;
            status = status + ","+document.getElementById("Status" + i).innerText;
        }
        var model = {
            "FirstName": fname,
            "LastName": lname,
            "Gender": gender,
            "Status": status,
        }
        $.ajax(
            {
                url: "/Employee/Save",
                dataType: "json",
                data: model,
                success: function (result) {
                    alert(result);
                },
                error: function (err) {
                    alert(err);
                }
            })
    }
</script>