It is required that the user be able to dynamically add 5 divs by clicking on the plus icon. An alert should appear after attempting to add more than 5 divs, prohibiting any odd numbers from being added.
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 provide suggestions for a function to enable the addition of an odd number of divs as well. Thank you.