JSFiddle - React, Tailwind, and code Playground

HTML

<button id="button">Add 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>
    <button class='removebutton'>Delete</button>
</div>

JavaScript

document.getElementById('button').onclick = duplicate;
$('body').on('click', ".removebutton", remove);


var i = 0;
var original = document.getElementById('duplicater');
var count = 1;

function duplicate() {
    if (count < 5) {
        var clone = original.cloneNode(true); // "deep" clone
        clone.id = "duplicater" + ++i; // there can only be one element with an ID
        original.parentNode.appendChild(clone);
        count++;
    } else {
        alert("Sorry, you can only have 5.");
    }
}

function remove() {
    if (count > 1) {
        if ($(this).parent().attr('id') != 'duplicater') {
            $(this).parent().remove();
            count--;
        } else {
            alert("You can't delete the first plan");
        }
    } else {
        alert("You can't delete the first plan");
    }
}