<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <button onclick="myFunction()">Maak een team aan</button> <div id="calc" class="row text-center" data-max=8 data-min=4 > </div> </div>

.entry:not(:first-of-type) { margin-top: 10px; } .glyphicon { font-size: 12px; }

function myFunction() { //genereerd de teams var text = ""; var i; for (i = 1; i < 4; i++) { text += "<div class='entry form-inline'><div class='form-group'><div class='input-group'><div class='input-group-addon'>" + i + "</div><input type='text' class='form-control' id='naam' placeholder='Naam'></div></div><div class='form-group'><select class='form-control'><option value='' disabled selected>Kind of Volwassene</option><option>Kind (t/m 11 jaar)</option><option>Volwassenen</option></select></div><button disabled type='button' class='btn btn-primary btn-remove btn-danger' style=''><span class='glyphicon glyphicon-minus'></span></button></div>"; } var text = text += "<div class='entry form-inline'><div class='form-group'><div class='input-group'><div class='input-group-addon'>" + i +"</div><input type='text' class='form-control' id='naam' placeholder='Naam'></div></div><div class='form-group'><select class='form-control'><option value='' disabled selected>Kind of Volwassene</option><option>Kind (t/m 11 jaar)</option><option>Volwassenen</option></select></div><button type='button' class='btn btn-primary btn-add btn-success' style=''><span class='glyphicon glyphicon-plus'></span></button></div>"; document.getElementById("calc").innerHTML = text; } $(function() { var i=4; $(document).on('click', '.btn-add', function(e) { e.preventDefault(); var controlForm = $('#calc:first'), currentEntry = $(this).parent('.entry:first'), newEntry = $(currentEntry.clone()).appendTo(controlForm); $(newEntry).find('.input-group-addon').html(++i); newEntry.find('input').val(''); controlForm.find('.entry:not(:last) .btn-add') .removeClass('btn-add').addClass('btn-remove') .removeClass('btn-success').addClass('btn-danger') .prop( "disabled", true ) .html('<span class="glyphicon glyphicon-minus"></span>'); if ($("#calc").data('min') <= $(".form-inline").length ) { $( ".btn-danger" ).prop( "disabled", false ); }; if ($("#calc").data('max') <= $(".form-inline").length ) { $( ".btn-add" ).prop( "disabled", true ); }; }).on('click', '.btn-remove', function(e) { i--; $(this).parent().nextAll('.entry').each(function() { $(this).find('.input-group-addon').html($(this).find('.input-group-addon').html()-1); }); $(this).parents('.entry:first').remove(); $( ".btn-add" ).prop( "disabled", false ); if ($("#calc").data('min') >= $(".form-inline").length ) { $( ".btn-danger" ).prop( "disabled", true ); }; e.preventDefault(); return false; }); });