How to value of dynamically created value back in view with remove and add button?

See more:

HTML

jQuery

MVC5

hi,
I have Button and on click of button I am creating new textboxes for value and one for color picker (any number of text box) Using JQuery, and then on click of save button I am getting the list of text box value and color and I storing it on database, this past is working fine,

I my model

public List SignalThresholdValueList { get; set; }
public List SignalThresholdColorList { get; set; }

in view

@Html.TextBoxFor(m => m.SignalThresholdValueList, new { @name = "SignalThresholdValueList", @class = "thresoldText" })

@Html.TextBoxFor(m => m.SignalThresholdColorList, new { @type = "color", @name = "SignalThresholdColorList", @class = "inputColorPicker" })

Here is the jQuery

<pre>  //Dynamically create the div
    $(document).ready(function () {
        var max_fields = 10; //maximum input boxes allowed
        var wrapper = $(".input_fields_wrap"); //Fields wrapper
        var add_button = $(".add_field_button"); //Add button ID

        var x = 1; //initlal text box count
        $(add_button).click(function (e) { //on add input button click
            e.preventDefault();
            if (x < max_fields) { //max input box allowed
                x++; //text box increment
                $(wrapper).append('<div  style="margin-bottom: 15px; ">' +
                    '<input class="thresoldText" type="text" name="SignalThresholdValueList"/>' +
                    '<input style="width:10px; width:20px; margin-left:5px" type="color" name="SignalThresholdColorList">' +//color picker
                    '<img style="padding-left:5px;" class="remove_field" src="/Images/delete.ico"/>' +
                    '</div>'); //add input box
            }
        });

        $(wrapper).on("click", ".remove_field", function (e) { //user click on remove text
            e.preventDefault(); $(this).parent('div').remove(); x--;
        })

        //$('input.SignalThresholdValueList').each(function () {
        //    alert($(this).val());
        //    textarray.push($(this).val());
        //});
    });

with this codeI am able to create dynamicaly textboxes and colorpickes,
ans storing on database,

now my problem is on Edit button click I am getting value from the databse for textbox and colorpicker, but I want to create the textboxes and color picker and add button in edit page with same value,

How to do this?

What I have tried:

<pre> 
<div class="sgnalContainer">
 <div style="width:50%; float:left">
     @foreach (var item in Model.SignalThresholdValueList)
      {
         <div style="padding-top:10px">
            <input type="text" value="@item" class="thresoldText" />
         </div>
                                }
    </div>
    <div style="width:50%; float:left; padding-left: 15px">
        @foreach (var item in Model.SignalThresholdColorList)
         {
            <div style="padding-top:15px;">
              <input type="color" value=@(item) class="inputColorPicker" />
            </div>
         }
   </div>
                           
 </div>

here I am getting textbox and color picker but i need remove button for all ad last textbox with add button.