adding divs dynamically using javascript-CodePudding

I want the user should be able to add 5 divs dynamically on click of plus icon after that alert should come only 5 divs can be added but odd numbers are not coming.

function addvv() {
  var numItems = $('div.box').length;
  if (numItems <= 5) {
    $('.box').clone().appendTo('.container');
    var x = document.getElementById("removediv");
    if (x.style.display === "none") {
      x.style.display = "block";
    }
  } else {
    alert('only 5 can be added');
  }
}

function removediv() {
  $(".box").remove();
}

<div class="container">

  <div class="box">

    <div style="background-color:blue;height: 26px;border-radius: 14px;">

      //this is the button to add divs dynamically

      <i class="fas fa-plus" id="adddiv" onclick="addvv()" style="color: red;float: right;margin-right: 15px;margin-top: 2px;font-size: 18px;"></i>
      <i class="fa fa-trash" id="removediv" onclick="removediv()" style="color: red;float: right;margin-right: 15px;margin-top: 2px;font-size: 18px;display:none"></i>
    </div>
    <div class="row" style="background-color:lightgray;height:100px;border-radius: 23px;">
      <div class="col-md-12" style="padding:10px">
        <div class="col-md-6">
          <label>Name:</label>
          <input type="text" id="name" />
        </div>
        <div class="col-md-6">
          <label>Salary:</label>
          <input type="text" id="salary" />
        </div>
      </div>
    </div>
  </div>
</div>

Please suggest some function so i can add odd number of divs also.Thanks

CodePudding user response：

There were several issues with your code. First, your conditional numLength <= 5 allows running clone() when numLength == 5 which allows a total of 6 clones, not the 5 you intend. Second, $('.box').clone() will clone all elements that match the selector .box. This means on first click it will clone one, on second it will clone two, etc.

I've fixed your code so that it will clone just one, display #removediv on all but the first .box, and remove the .box for which #removediv is clicked. Also, ids should be unique for the whole document so really you should be using classes.

function addvv() {
    var numItems = document.getElementsByClassName('box');
    if (numItems.length < 5) {
        $('.box').first().clone().appendTo('.container');
        $('.box').not(':first').find('#removediv').css('display', 'block');
    }
    else {
        alert('only 5 can be added');
    }
}

function removediv(e) {
    $(e).closest('.box').remove();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="box">
        <div  style="background-color:blue;height: 26px;border-radius: 14px;">
            <!-- //this is the button to add divs dynamically -->
            <i class="fas fa-plus" id="adddiv" onclick="addvv()" style="color: red;float: right;margin-right: 15px;margin-top: 2px;font-size: 18px;"> </i>
            <i class="fa fa-trash" id="removediv" onclick="removediv(this)" style="color: red;float: right;margin-right: 15px;margin-top: 2px;font-size: 18px;display:none">-</i>
        </div>
        <div class="row" style="background-color:lightgray;height:100px;border-radius: 23px;">
            <div class="col-md-12" style="padding:10px">
                <div class="col-md-6">
                    <label>Name:</label>
                    <input type="text" id="name" />
                </div>
                <div class="col-md-6">
                    <label>Salary:</label>
                    <input type="text" id="salary" />
                </div>
            </div>
        </div>
    </div>
</div>