JSFiddle - React, Tailwind, and code Playground
HTML
<button id="buttonAdd">Add another plan</button>
<button id="buttonRemove">Remove another plan</button>
<div id="duplicater">
<p>Choose Your Mobile Plan</p>
<select>
<option value="1">Package 1</option>
<option value="2">Package 2</option>
<option value="3">Package 3</option>
<option value="4">Package 4</option>
<option value="5">Package 5</option>
<option value="6">Package 6</option>
</select>
</div>
JavaScript
var buttonAdd = document.getElementById('buttonAdd');
var buttonRemove = document.getElementById('buttonRemove');
buttonAdd.onclick = duplicate;
buttonRemove.onclick = remove;
var original = document.getElementById('duplicater');
var i = 1;
var max = 5;
function refresh() {
buttonAdd.disabled = i > max;
buttonRemove.disabled = i <= 1;
}
function duplicate() {
if (i < max + 1) {
i++;
var clone = original.cloneNode(true);
clone.id = "duplicater" + i;
original.parentNode.appendChild(clone);
refresh();
}
}
function remove() {
if (i > 1) {
var toRemove = document.getElementById('duplicater' + i);
toRemove.parentNode.removeChild(toRemove);
i--;
refresh();
}
}
refresh();