Replicate Creating Dynamic Controls on Create/ EDIT Pages

Question

I want to display a List of File Attachments (filename only), the ability to Add new Attachments on the CREATE page works perfectly fine. I use the code from here See Screenshot below..

public IList<string> Docs { get; set; }

<div class="form-group">
    <label class="control-label" for="SelectedRDIMSdocs"><span class="field-name">RDIMS Document(s)</span> </label>
    <div class="controls">
        <div>
            <div class="entry input-group col-xs-3">
                <input class="form-control" name="SelectedRDIMSdocs" type="text" placeholder="#999999" />
                <span class="input-group-btn">
                    <button class="btn btn-default btn-add" type="button">
                        <span class="glyphicon glyphicon-plus"></span>
                    </button>
                </span>
            </div>
        </div>
    </div>
</div>

<script>

    $(function () {


        $(document).on('click', '.btn-add', function (e) {
            e.preventDefault();

            var controlForm = $('.controls div:first'),
                currentEntry = $(this).parents('.entry:first'),
                newEntry = $(currentEntry.clone()).appendTo(controlForm);

            newEntry.find('input').val('');
            controlForm.find('.entry:not(:last) .btn-add')
                .removeClass('btn-add').addClass('btn-remove')
                .removeClass('btn-success').addClass('btn-danger')
                .html('<span class="glyphicon glyphicon-minus"></span>');
        }).on('click', '.btn-remove', function (e) {
            $(this).parents('.entry:first').remove();

            e.preventDefault();
            return false;
        });

    });

</script>

I'm attempting to Replicate this type of build for the EDIT page using the below code however clicking on the Plus (add) adds the entry into the middle of the list, please see image below and Fiddle here

<div class="form-group">
    <label asp-for="Docs" class="required"><span class="field-name">Documents</span> <strong class="required">(required)</strong></label>

    <div class="controls">
        @foreach (var item in Model.Docs)
        {
            <div>
                <div class="entry input-group col-xs-3">
                    <input class="form-control" name="SelectedDocs" type="text" placeholder="#999999" value="@item.Number" />
                    <span class="input-group-btn">
                        <button class="btn btn-danger btn-remove" type="button">
                            <span class="glyphicon glyphicon-minus"></span>
                        </button>
                    </span>
                </div>
            </div>
        }
        <div>
            <div class="entry input-group col-xs-3">
                <input class="form-control" name="SelectedDocs" type="text" placeholder="#999999" />
                <span class="input-group-btn">
                    <button class="btn btn-default btn-add" type="button">
                        <span class="glyphicon glyphicon-plus"></span>
                    </button>
                </span>
            </div>
        </div>
    </div>
</div>

<script>

    $(function () {
    
        $(document).on('click', '.btn-add', function (e) {
            e.preventDefault();

            var controlForm = $('.controls div:first'),
                currentEntry = $(this).parents('.entry:first'),
                newEntry = $(currentEntry.clone()).appendTo(controlForm);

            newEntry.find('input').val('');
            controlForm.find('.entry:not(:last) .btn-add')
                .removeClass('btn-add').addClass('btn-remove')
                .removeClass('btn-success').addClass('btn-danger')
                .html('<span class="glyphicon glyphicon-minus"></span>');
        }).on('click', '.btn-remove', function (e) {
            $(this).parents('.entry:first').remove();

            e.preventDefault();
            return false;
        });

    });

</script>

Answer 1

In your current jquery code new row was appending inside controls first div i.e : div:first because as you look at your html structure i.e :

<div class="controls"><!-- controls-->
   <div><!--first div-->
      <div class="entry input-group col-xs-3">
         <input class="form-control" name="SelectedDocs" type="text" placeholder="#999999" value="@item.Number" />
         ---
      </div>
      <!--new row was appending here-->
   </div>
   <!--other rows-->
</div>

Instead you need to use here .controls:last-child so that it get the last div and append new row after that .Also , here i have added extra class i.e : somehting to easily cloned the required div and then while deleting i have use closest('.somehting') to get closest div with that class name and remove same.

Demo Code :

$(function() {


  $(document).on('click', '.btn-add', function(e) {
    e.preventDefault();
//get last child of div.controls
    var controlForm = $('.controls:last-child'),
    //get closest div with class name somehting
      currentEntry = $(this).closest('div.somehting'),
      newEntry = $(currentEntry.clone()).appendTo(controlForm);
    newEntry.find('input').val('');
    controlForm.find('.entry:not(:last) .btn-add')
      .removeClass('btn-add').addClass('btn-remove')
      .removeClass('btn-success').addClass('btn-danger')
      .html('<span class="glyphicon glyphicon-minus"></span>');
  }).on('click', '.btn-remove', function(e) {
  //get closest div with class somehting and remove same
    $(this).closest('.somehting').remove();

    e.preventDefault();
    return false;
  });

});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="form-group">
  <label for="RDIMSdocs"><span class="field-name">RDIMS Documents</span> </label>

  <div class="controls">
  <!--added this class-->
    <div class="somehting">
      <div class="entry input-group col-xs-3">
        <input class="form-control" name="SelectedRDIMSdocs" type="text" placeholder="#999999" value="2222222">
        <span class="input-group-btn">
          <button class="btn btn-danger btn-remove" type="button">
            <span class="glyphicon glyphicon-minus"></span>
        </button>
        </span>
      </div>
    </div>
    <div class="somehting">
      <div class="entry input-group col-xs-3">
        <input class="form-control" name="SelectedRDIMSdocs" type="text" placeholder="#999999" value="11111">
        <span class="input-group-btn">
          <button class="btn btn-danger btn-remove" type="button">
            <span class="glyphicon glyphicon-minus"></span>
        </button>
        </span>
      </div>
    </div>
    <div class="somehting">
      <div class="entry input-group col-xs-3">
        <input class="form-control" name="SelectedRDIMSdocs" type="text" placeholder="#999999">
        <span class="input-group-btn">
          <button class="btn btn-default btn-add" type="button">
            <span class="glyphicon glyphicon-plus"></span>
        </button>
        </span>
      </div>
    </div>
  </div>
</div>