How to Prevent id duplication of dynamic div

Question

I am trying to create divs dynamically my method is working but I am having issue in id duplication. In this scenario I am restricted to creating only 4 extra divs. Below is my code.

Html code where divs are to be appeneded:

<div id="bedTypeContainer" class="w-100">
                
</div>

Html button code to add divs:

<button id="bedTypeAdder" class="btn btn-sm btn-outline-success">Add more</button>

Jquery code for dynamic div creation:

 //bed type adder
         var bedTypeCounter=0;// too keep track on the number of divs created
         $("#bedTypeAdder").click(function(event) {
            event.preventDefault();
            bedTypeCounter++;
            if(bedTypeCounter<5)
            {
                $('#bedTypeContainer').append('<div id="btDynamicRow'+bedTypeCounter+'" class="row mb-3"> \
                    <div class="col-4"> \
                        <select id="" class="form-select" id="validationCustom13" required> \
                            <option selected disabled value="">Choose...</option> \
                            <option>...</option> \
                        </select> \
                        <div class="invalid-feedback">Please select a valid Option.</div> \
                    </div> \
                    <div class="col-2"> \
                        <input id="" type="number" step="1" min="1" max="30" class="form-control max-limiter" id="validationCustom15" required> \
                        <div class="valid-feedback">Looks good!</div> \
                    </div> \
                    <div class="col">   \
                        <button id="btDynamicRowRemover'+bedTypeCounter+'" class="btn btn-outline-danger btDynamicRowRemoverClass">Remove</button>    \
                    </div>  \
                </div>');
            }
            if(bedTypeCounter == 5)
            {
                alert("Max number of beds Reached but dont worry you can add extra beds");
                $('#bedTypeAdder').hide();
            }
        });

Jquery Code to remove div:

 $(document).on('click', '.btDynamicRowRemoverClass', function(event){
             event.preventDefault();
            var idSelector = $(this).attr("id");
            if(idSelector == 'btDynamicRowRemover2'){
                $('#btDynamicRow2').remove();
                $('#bedTypeAdder').show();
                bedTypeCounter--;
            }
           
         });

The issue I am facing here is like if I remove an id in this scenario the second row and add another div the id gets duplicated and I need the counter so I do not create more than 4 divs.

Answer 1

You can make your life easier by not using IDs. There's no need. Just use jQuery's $(selector).length to get the number. I also made your block of code actual HTML that sits on the page and gets cloned. Alot easier to manage rather than escaping line breaks with an inline script. Finally, to remove, just use $(this).closest(selector).remove()

You mention in a comment that you need ids to send values to the database. If you like, show how you're doing that and I can suggest an alternative. There's really no need for the IDs - they will just trip over each other.

//bed type adder
var bedTypeCounter = 0; // too keep track on the number of divs created
$("#bedTypeAdder").click(function(event) {
  event.preventDefault();
  bedTypeCounter = $('.bed-thing').length;
  if (bedTypeCounter < 5) {
    let clone = $('#template').clone().addClass('bed-thing').removeAttr('id')
    $('#bedTypeContainer').append(clone);
  }
  if (bedTypeCounter == 5) {
    alert("Max number of beds Reached but dont worry you can add extra beds");
    $('#bedTypeAdder').hide();
  }
});


$(document).on('click', '.btDynamicRowRemoverClass', function(event) {
  event.preventDefault();
  $(this).closest('.bed-thing').remove();
});

.bed-thing {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  margin-bottom: 10px;
}

#template {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bedTypeContainer" class="w-100">

</div>


Html button code to add divs:

<button id="bedTypeAdder" class="btn btn-sm btn-outline-success">Add more</button>

<div id="template" class=" row mb-3">
  <div class="col-4">
    <select id="" class="form-select" id="validationCustom13" required>
      <option selected disabled value="">Choose...</option>
      <option>...</option>
    </select>
    <div class="invalid-feedback">Please select a valid Option.</div>
  </div>
  <div class="col-2">
    <input id="" type="number" step="1" min="1" max="30" class="form-control max-limiter" id="validationCustom15" required>
    <div class="valid-feedback">Looks good!</div>
  </div>
  <div class="col">
    <button id="btDynamicRowRemover' + bedTypeCounter + '" class="btn btn-outline-danger btDynamicRowRemoverClass">Remove</button>
  </div>
</div>

Answer 2

add another variable like

 var bedId = 0 ; 

and update your code like this

  event.preventDefault();
  bedTypeCounter++;
  bedId++;

appended html

<div id="btDynamicRow'+bedId+'" class="row mb-3">

note : dont do

$(document).on('click', '.btDynamicRowRemoverClass', function(event){
bedId --
})