<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"> <form class='center' method='post' action='{{ @BASE }}/reservation/add'> <fieldset id='payment_fields'> <legend>Zahlungsverkehr</legend> <div class="form-group row mt_payment {{ (@reservation.0.fpdate_paid) ? 'has-success' : (@reservation.0.id && @reservation.0.fpdate_req != null) ? 'has-danger' : '' }}"> <div class="col-sm-2"> <div class="form-check form-check-inline"> <label class="form-check-label "> <input class="form-check-input" type="checkbox" id="fpCheckBox" value="fpCheckBox" name="fpCheckBox" {{ (@reservation.0.fpdate_req != null) ? checked : '' }}> Anzahlung </label> </div> </div> <div class="col-sm-2"> <div class="input-group"> <span class="input-group-addon firstpayment">€</span> <input type="text" class="form-control firstpayment" id="fpAmount" name="fpAmount" value="{{ @reservation.0.fp_amount }}"> </div> <small id="fpAmountSmall" class="form-text text-muted form-control-sm firstpayment">Anzahlungsbetrag</small> </div> <div class="col-sm-2"> <input type="text" class="form-control mt_date firstpayment" id="fpDate" name="fpDate" value="{{ @reservation.0.fpdate_req }}"> <small id="fpDateSmall" class="form-text text-muted form-control-sm firstpayment">fällig am</small> </div> <div class="col-sm-2"> <input type="text" class="form-control mt_date firstpayment" id="fpPaid" name="fpPaid" value="{{ @reservation.0.fpdate_paid }}"> <small id="fpPaidSmall" class="form-text text-muted form-control-sm firstpayment">erfolgt am</small> </div> <div class="col-sm-1 input-group-btn"> <button class="btn btn-success" type="button" onclick="add_payment_fields();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button> </div> </div> </fieldset> </div> <div class="panel panel-default"> <div class="panel-heading">Dynamic Form Fields - Add & Remove Multiple fields</div> <div class="panel-heading">Education Experience</div> <div class="panel-body"> <div id="education_fields"> </div> <div class="col-sm-3 nopadding"> <div class="form-group"> <input type="text" class="form-control" id="Schoolname" name="Schoolname[]" value="" placeholder="School name"> </div> </div> <div class="col-sm-3 nopadding"> <div class="form-group"> <input type="text" class="form-control" id="Major" name="Major[]" value="" placeholder="Major"> </div> </div> <div class="col-sm-3 nopadding"> <div class="form-group"> <input type="text" class="form-control" id="Degree" name="Degree[]" value="" placeholder="Degree"> </div> </div> <div class="col-sm-3 nopadding"> <div class="form-group"> <div class="input-group"> <select class="form-control" id="educationDate" name="educationDate[]"> <option value="">Date</option> <option value="2015">2015</option> <option value="2016">2016</option> <option value="2017">2017</option> <option value="2018">2018</option> </select> <div class="input-group-btn"> <button class="btn btn-success" type="button" onclick="education_fields();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button> </div> </div> </div> </div> <div class="clear"></div> </div> <div class="panel-footer"><small>Press <span class="glyphicon glyphicon-plus gs"></span> to add another form field :)</small>, <small>Press <span class="glyphicon glyphicon-minus gs"></span> to remove form field :)</small></div> <div class="panel-footer"><small><em><a href="http://shafi.info/">More Info - Developer Shafi (Bangladesh)</a></em></em></small></div> </div>

var room = 1; var payments = 1; function education_fields() { room++; var objTo = document.getElementById('education_fields') var divtest = document.createElement("div"); divtest.setAttribute("class", "form-group removeclass"+room); var rdiv = 'removeclass'+room; divtest.innerHTML = '<div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control" id="Schoolname" name="Schoolname[]" value="" placeholder="School name"></div></div><div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control" id="Major" name="Major[]" value="" placeholder="Major"></div></div><div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control" id="Degree" name="Degree[]" value="" placeholder="Degree"></div></div><div class="col-sm-3 nopadding"><div class="form-group"><div class="input-group"> <select class="form-control" id="educationDate" name="educationDate[]"><option value="">Date</option><option value="2015">2015</option><option value="2016">2016</option><option value="2017">2017</option><option value="2018">2018</option> </select><div class="input-group-btn"> <button class="btn btn-danger" type="button" onclick="remove_education_fields('+ room +');"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></div></div></div></div><div class="clear"></div>'; objTo.appendChild(divtest); } function add_payment_fields(){ payments++; var objTo = document.getElementById('payment_fields'); var divtest = document.createElement("div"); divtest.setAttribute("class", "form-group removeclass"+payments); var rdiv = 'removeclass'+payments; divtest.innerHTML = '<div>TEST</TEST>'; objTo.appendChild(divtest); } function remove_education_fields(rid) { $('.removeclass'+rid).remove(); }