Looping form based on select option value - php

Question

I have select option input. When I choose the number on it and than click the button, I want to display the forms. The number of form displayed based on the select option I choose. I don't know how to loop it in jquery and make the form display:none (before the button click the form is not visible). And is it posible to input more than one data in one table in the same time and how to do that? I've tried this
Thank You
<div class="form-group col-sm-6">
<label for="sel1">Jrekrut : </label>
<select class="form-control" name="sel1" id="sel1" >
<option selected>Pilih</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option> </select>
</div>
<form class="form-horizontal striped-rows b-form" id="form1">
<div class="card-body">
<div class="form-group row">
<div class="col-sm-3">
<div class="b-label">
<label for="inputEmail3" class="control-label col-form-label">Full Name</label>
</div>
</div>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="Full Name Here">
</div>
</div>
</form>
<script type="text/javascript">
var num;
$('#sel1').on('change', function(event) {
alert("This is the value selected in solutions: " + $(this).val());
num = $(this).val();
});
$("#btn").click(function(){
//$("#form1").hide();
$("#form1").toggle();
console.log(num);
});

Answer 1

Okey. So first you need to make a wrapper for all forms like '.form-container' and next you need to create html in javascript and push into it.
$(document).ready(function(){
$('#sel1').on('change', function(event) {
initForms($(this).val());
});
$('body').on('click', '.btn', function(){
$('.form-horizontal').each(function(){
$(this).show();
});
)};
});
function initForms(formCount){
var finalHTML= "";
for(i=0, i<formCount; i++){
var tempHTML ='<form id="$formid$" class="form-horizontal striped-rows b-form" style="display:none;"><div class="card-body"><div class="form-group row"><div class="col-sm-3"><div class="b-label"><label for="inputEmail3" class="control-label col-form-label">Full Name</label></div></div><div class="col-sm-9"><input type="text" class="form-control" id="inputEmail3" placeholder="Full Name Here"></div></div></div></form>';
tempHTML = tempHTML.split("$formid$").join("form-" + i);
finalHTML += tempHTML;
}
$('.form-container').empty().html(finalHTML);
}

Answer 2

I have placed your form in a div with id equal to form_container, so that you can alter the number of forms in a cleaner way.
<div id="form_container">
<form class="form-horizontal striped-rows b-form" id="form1">
...
</form>
</div>
You can then use append() to add more some forms to your div in a for loop.
var num;
$('#sel1').on('change', function(event) {
alert("This is the value selected in solutions: " + $(this).val());
num = $(this).val();
var formHTML = $("#form1").html(); // Get the HTML content of '#form1'
$('#form_container').html(''); // Clear the contents of form_container
for(var i = 0; i < num; i++){
var id = i + 1;
$('#form_container').append('<form class="form-horizontal striped-rows b-form" id="form'+id+'">'+formHTML+'</form>');
}
});

Answer 3

form display:none
<form class="form-horizontal striped-rows b-form" id="form1" style="display:none">
</form>
$('#sel1').click(function(){
$("#form1").show();
});