How to Prevent id duplication of dynamic div-CodePudding

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" >
                
</div>

Html button code to add divs:

<button id="bedTypeAdder" >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 '" > \
                    <div > \
                        <select id=""  id="validationCustom13" required> \
                            <option selected disabled value="">Choose...</option> \
                            <option>...</option> \
                        </select> \
                        <div >Please select a valid Option.</div> \
                    </div> \
                    <div > \
                        <input id="" type="number" step="1" min="1" max="30"  id="validationCustom15" required> \
                        <div >Looks good!</div> \
                    </div> \
                    <div >   \
                        <button id="btDynamicRowRemover' bedTypeCounter '" >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.

CodePudding user response：

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" >

</div>


Html button code to add divs:

<button id="bedTypeAdder" >Add more</button>

<div id="template" >
  <div >
    <select id=""  id="validationCustom13" required>
      <option selected disabled value="">Choose...</option>
      <option>...</option>
    </select>
    <div >Please select a valid Option.</div>
  </div>
  <div >
    <input id="" type="number" step="1" min="1" max="30"  id="validationCustom15" required>
    <div >Looks good!</div>
  </div>
  <div >
    <button id="btDynamicRowRemover'   bedTypeCounter   '" >Remove</button>
  </div>
</div>

CodePudding user response：

add another variable like

 var bedId = 0 ;

and update your code like this

  event.preventDefault();
  bedTypeCounter  ;
  bedId  ;

appended html

<div id="btDynamicRow' bedId '" >

note : dont do

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