How to assign deleted textbox id to newly generated textbox when generating dynamic textbox?

Question

I am dynamically generating textboxes and only 5 textbox are allowed.

Now say i have generated 5 textbox with Txtopt1,Txtopt2,Txtopt3 resp.. and i am removing 2nd textbox and then again I am generating 1 new textbox then i want to assign Txtopt2 to newly generated textbox instead of Txtopt4.

This is my Code:

var cnt = 1;
 var usedIds = [];
 var maxNumberOfTextboxAllowed = 5;
 function Generatetextbox() {
      if (cnt <= maxNumberOfTextboxAllowed) {
            var id = findAvailableId();
            var OrderingField = $("<div class='OrderingField' id='OrderingField" + id + "'/>");
            var LeftFloat = $("<div class='LeftFloat' id='LeftFloat" + id + "'/>");
            var RightFloatCommands = $("<div class='RightFloat Commands' id='RightFloat Commands" + id + "'/>");
            var upButton = $("<button value='up'>Up</button>");
            var downButton = $("<button value='down'>Down</button>");
            var fName = $("<input type='text' class='fieldname' id='Txtopt" + id + "'  name='TxtoptNm" + id + "'/>"); 
            var removeButton = $("<img class='remove' src='../remove.png' />");
            LeftFloat.append(fName);
            LeftFloat.append(removeButton);
            RightFloatCommands.append(upButton);
            RightFloatCommands.append(downButton);
            OrderingField.append(LeftFloat);
            OrderingField.append(RightFloatCommands);
            $("#FieldContainer").append(OrderingField);
            cnt = cnt + 1;
        }
        else
            alert("Cant create more than 5 route points")
    }

 function findAvailableId() {
        var i = 1;
        while (usedIds[i]) i++;
        usedIds[i] = true;
        return i;
    };

    function removeId(idToRemove) {
        usedIds[idToRemove] = false;
    };

  $(document).on('click', "img.remove", function() {
      $(this).parent().parent().fadeOut(1000, function() {
        if (cnt > maxNumberOfTextboxAllowed)
          cnt = cnt - 2;
        else if (cnt == 1)
          cnt = 1;
        else
          cnt = cnt - 1;

        var id = $(this).attr("id").substr(5);

        removeId(id);

        $(this).remove();
        console.log(cnt)
      });

    });

.LeftFloat
{
    float: left
}
.RightFloat
{
    float: right
}

.FieldContainer
{
    border: 1px solid black;
    width: 400px;
    height: 300px;
    overflow-y: auto;
    font-family:tahoma;
}
 .OrderingField
{
    margin: 3px;
    border: 1px dashed #0da3fd;
    background-color: #e8efff;
    height: 50px;
}
.OrderingField div.Commands
{
    width: 60px;
}
button
{
    width: 60px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <div id="FieldContainer">
                                    </div>
 <button onclick="Generatetextbox()" class="btn btn-primary" type="button">Add</button>

Answer 1

Keep track of the IDs you've assigned, and always take the lowest ones available.

Also, You don't need to use escape characters inside your html, you can use the single quote marks to specify strings.

Something like this should help:

    var cnt = 1;
    var maxNumberOfTextboxAllowed = 5;
    var usedIds = [];

    function findAvailableId() {
      var i = 1;
      while (usedIds[i]) i++;
      usedIds[i] = true;
      return i;
    };

    function removeId(idToRemove) {
      usedIds[idToRemove] = false;
    };

    function Generatetextbox() {
      if (cnt <= maxNumberOfTextboxAllowed) {
        var id = findAvailableId();
        var fieldWrapper = $("<div class='fieldwrapper' id='field" + id + "'/>");
        var fName = $("<input type='text' class='fieldname' id='Txtopt" + id + "'  name='TxtoptNm" + id + "'  />");
        var removeButton = $("<img class='remove' src='../remove.png' />");

        fieldWrapper.append(fName);
        fieldWrapper.append(removeButton);
        fieldWrapper.append('<br />');
        fieldWrapper.append('<br />');
        $("#abc").append(fieldWrapper);
        cnt = cnt + 1;
      } else
        alert("Cant create more than 5 textbox")
    }

    $(document).on('click', "img.remove", function() {
      $(this).parent().fadeOut(1000, function() {
        if (cnt > maxNumberOfTextboxAllowed)
          cnt = cnt - 2;
        else if (cnt == 1)
          cnt = 1;
        else
          cnt = cnt - 1;

        var id = $(this).attr("id").substr(5);

        removeId(id);

        $(this).remove();
        console.log(cnt)
      });

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="abc"></div>
    <button onclick="Generatetextbox()" class="btn btn-primary" type="button">Add</button>