JSFiddle - React, Tailwind, and code Playground

by roXon

HTML

<div class="repeat">repeat</div>
<div class="select">
    <select></select>
</div>

<div id="holder"></div>

CSS

.repeat{
    color:#fff;
    position:relative;
    background:#888;
    width:300px;
    height:30px;
    padding:6px;
    margin:1px;
}
.new{
    background:#4e4e4e;
    color:#cf5;
}

JavaScript

//NUMERATE SELECT
for (var i = 0; i < 10; i++) { // add counts in a for loop
    $('.select select').append('<option value=' + i + '>' + i + '</option>');
}
//#

//DUPLICATE PLUGIN
$.fn.duplicate = function(count, cloneEvents) {
    var tmp = [];
    for (var i = 0; i < count; i++) {
        $.merge(tmp, this.clone(cloneEvents).get());
    }
    return this.pushStack(tmp);
};

//SELECT CHANGE FUNCTION (on change get value and clone)
$('.select select').change(function(){  // on change...
    var numOfClones = $(this).val();    // get value...
    $('#holder').html('');              // empty holder if there are some old clones
    $('.repeat').duplicate(numOfClones).addClass('new').appendTo('#holder'); // duplicate; fill holder with new clones; the class 'new' is just for styling
});