On First Load Show the Dynamically Created Controls using jQuery

Hi,

Here I have created sample that will help you out.

HTML

<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            if (!isPostBack()) {
                AddControl();
            }
            AddData();
            $("#btnAdd").bind("click", function () {
                AddControl();
            });

            $("#btnGet").bind("click", function () {
                var values = "";
                $("input[name=DynamicTextBox]").each(function () {
                    values += $(this).val() + "\n";
                });
                alert(values);
            });

            $("body").on("click", ".remove", function () {
                $(this).closest("div").remove();
                var i = 1;
                var Ids = [];
                $('[id*=ddl]').each(function () {
                    $(this).attr("id", "ddl" + i);
                    Ids.push(i);
                    i++;
                });
                $('[id*=hfDDLId]').val(parseInt($('[id*=hfDDLId]').val()) - 1);
                var resultIds = Ids.join(',');
                $('[id*=hfDropDownIds]').val(resultIds);
            });
        });

        function AddControl() {
            var Id = parseInt($('[id*=hfDDLId]').val()) + 1;
            var ddlId = "ddl" + (Id);
            var div = $("<div />");
            div.html(getDropDownList(ddlId, ddlId, ''));
            var values = [];
            div.append(GetDynamicTextBox(values));
            $("#TextBoxContainer").append(div);
            $('[id*=hfDDLId]').val(Id);

            var previousDropDownId = $('[id*=hfDropDownIds]').val();
            if (previousDropDownId != '') {
                $('[id*=hfDropDownIds]').val(previousDropDownId + ',' + Id);
            } else {
                $('[id*=hfDropDownIds]').val(Id);
            }
            return false;
        }

        function AddData() {
            var values = eval('<%=Values%>');
            var dropDownValues = eval('<%=dropdownValues%>');
            if (values != null && dropDownValues != null) {
                var html = "";
                var i = 0;
                var count = 1;
                $('[id*=hfDDLId]').val("");
                $('[id*=hfDropDownIds]').val("");
                $(dropDownValues).each(function () {
                    var div = $("<div />");
                    var ddlId = "ddl" + (i + 1);
                    div.html(getDropDownList(ddlId, ddlId, this));
                    var drpvalues = [];
                    drpvalues.push(values[count - 1]);
                    drpvalues.push(values[count]);
                    div.append(GetDynamicTextBox(drpvalues));
                    $("#TextBoxContainer").append(div);
                    $('[id*=hfDDLId]').val(i + 1);
                    var previousDropDownId = $('[id*=hfDropDownIds]').val();
                    if (previousDropDownId != '') {
                        $('[id*=hfDropDownIds]').val(previousDropDownId + ',' + (i + 1));
                    } else {
                        $('[id*=hfDropDownIds]').val((i + 1));
                    }
                    i++;
                    count = count + 2;
                });
            }
            return false;
        }

        function getDropDownList(name, id, selectedValue) {
            var combo = $("<select></select>").attr("id", id).attr("name", name).attr("runat", "server").attr("class", "class").attr("required", "required");
            combo.append("<option value=" + "" + ">" + "Select Category" + "</option>");
            combo.append("<option value=" + "1" + ">" + "1" + "</option>");
            combo.append("<option value=" + "2" + ">" + "2" + "</option>");
            combo.append("<option value=" + "3" + ">" + "3" + "</option>");
            if (selectedValue != '') {
                $(combo).find('option[value=' + selectedValue + ']').attr('selected', true);
            }
            return combo;
        }
        function GetDynamicTextBox(values) {
            var val1 = '';
            var val2 = '';
            if (values[0] != null) {
                val1 = values[0];
            }
            if (values[1] != null) {
                val2 = values[1];
            }
            return '<input name = "DynamicTextBox" type="text" value = "' + val1 + '" required/>&nbsp'
+ '<input name = "DynamicTextBox" type="text" value="' + val2 + '" required/>&nbsp'
+ '<input type="button" value="Remove" class="remove" />'
        }
        function isPostBack() {
            return document.getElementById('_ispostback').value == 'True';
        }
    </script>
    <input id="btnAdd" type="button" value="Add" />
    <br />
    <br />
    <div id="TextBoxContainer">
        <!--Textboxes will be added here -->
    </div>
    <br />
    <input type="hidden" id="hfSelectedValue" runat="server" />
    <input type="hidden" id="hfDropDownIds" value="" runat="server" />
    <input id="btnGet" type="button" value="Get Values" />
    <input type="hidden" id="hfDDLId" value="0" />
    <input type="hidden" id="_ispostback" value="<%=Page.IsPostBack.ToString()%>" />
    <asp:Button Text="Save" runat="server" OnClick="Save" />
</div>

Code

protected string Values;
protected string dropdownValues;
protected void Save(object sender, EventArgs e)
{
    string[] textboxValues = Request.Form.GetValues("DynamicTextBox");
    JavaScriptSerializer serializer = new JavaScriptSerializer();
    this.Values = serializer.Serialize(textboxValues);
    int dropdownCount = hfDropDownIds.Value.Split(',').Length;
    int count = 1;
    for (int i = 0; i < dropdownCount; i++)
    {
        Data data = new Data
        {
            DropDownListValue = Request.Form["ddl" + hfDropDownIds.Value.Split(',')[i]],
            textBox1Value = textboxValues[count - 1],
            textBox2Value = textboxValues[count]
        };
        dropdownValues = dropdownValues + data.DropDownListValue + ",";
        count = count + 2;
        SaveData(data);
    }
    dropdownValues = dropdownValues.Remove(dropdownValues.Length - 1, 1);
    dropdownValues = serializer.Serialize(dropdownValues.Split(',').ToArray());
}

private void SaveData(Data data)
{
    string dropdownValue = data.DropDownListValue;
    string textBox1 = data.textBox1Value;
    string textBox2 = data.textBox2Value;
    // Write code to save Data.
}

Data Class

public class Data
{
    public string DropDownListValue { get; set; }
    public string textBox1Value { get; set; }
    public string textBox2Value { get; set; }
}

Screenshot