I am trying to add and remove a dropdown list based on the number selected in an input field with type number.

Upon incrementing the number I want to add another clone of a previously created dropdown list. After decrementing i want the last one to be removed again. Keeping the other ones with their respective values. 

My code so far keeps adding dropdowns but it's not good coding how it's done. I don't know how to get the last element removed dynamically.

Html:

```
<div class="row step2">
    <h3>Aantal deelorganisaties inclusief hoofdorganisatie</h3>
    <p>Kies het aantal deelorganisaties voor wie je het samengestelde lidmaatschap ook wil activeren</p>
    <div>
        <input type="number" name="suborgamount" class="suborgamount" min="0" value="0"/> 
        <i class="fa fa-times suborgpriceperyear">
    </div>
    <div class="headorgdropdownholder col-md-12">
        <p class="col-md-5">Selecteer je eigen organisatie voor het lidmaatschap te activeren:</p>
        <div class="col-sm-12 col-md-4 space filter-fields" style="padding-right: 0">
            <select class="selectpicker" id="orgdropdown" data-live-search="true">
                <?php 
                    foreach ($allorgs as $org) {
                        echo "<option data-tokens=\"$org->name\">orgid: $org->org_id - naam: $org->name</option>";
                    }
                ?>
            </select>
        </div>
    </div>
    <div class="suborgdropdownholder col-md-12">

    </div>
</div>

```

Jquery:

```
$(".suborgamount").bind('keyup mouseup', function () {
    addRemoveDropdownList();
});

function addRemoveDropdownList() {
    var container = $("<p class='col-md-4'>Selecteer deelorganisatie(s) waarvoor het lidmaatschap ook geactiveerd moet worden:</p>");
    $('.suborgdropdownholder').html(container);

    // Finding total number of elements added
    var total_element = $('input[name=suborgamount]').val();

    // last <div> with element class id
    var lastid = $(".selectpicker:last").attr("id");
    var split_id = lastid.split("_");
    var nextindex = Number(split_id[1]) + 1;
    if (isNaN(nextindex)) {
        nextindex = 1;
    }

    var newselect = $('#orgdropdown').clone().attr({
        style:'display: block !important',
        id:'suborgdropdown_'+nextindex
    });

    $(".selectpicker:last").after(newselect);
}

```

JSFiddle showing the problem [jsfiddle](https://jsfiddle.net/uf3ctsqe/)