Get value from select and clone form number of times

Question

I have a select box , i want user to select value and then after getting value forms are to be added in page according to selected value , like if user selects "1" 1 form is to be added and if user select "10" 10 forms. also if nothing is given or not selected no form to display . It seems to be problem in my js , it does add forms but add other more forms too which i dont expect.

<div class="form-group">
                                        <label>Number of travellers</label>
                                        <select class="form-control" id="travellersNumber">
                                            <option value="0">Select Numbers Of Travellers</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                        </select>
                                    </div>

<div class=bookForm>

<div class=col-xs-12>

<h3 class=bookForm-heading>Submit your details</h3>

</div>

<div class="col-xs-12 col-md-3">

<div class=form-group>

<label>First Name</label>

<input class=form-control name=firstName>

</div>
</div>
</div>

.bookForm{
    display:none;
  }

function bookFormToggle(){
    var traveller = $("#travellersNumber");
    var form = $(".bookForm");
    var heading = $('.bookForm-heading');
    function unhideForm(){
        var travellerValue = parseInt(traveller.val());
        for(i=0;i<travellerValue;i++){
                heading = heading.html('Traveller '+ (i+1) +' Information');
                form.clone().insertAfter(form);
        }
    }
    traveller.on("change",unhideForm);
    unhideForm();
}
bookFormToggle();

Answer 1

The problem is that you are not removing the old forms that you have added.

$(document).ready(function(){
  var traveller = $('select[name="trav"]');
  traveller.change(function(){
    $('.bookForm').not('.bookForm:first').remove();
    var travellerValue = traveller.val();
    var form = $('.bookForm:first');
    for(i=travellerValue;i>1;i--){
      var newAdd = form.clone().insertAfter(form);
      newAdd.find('.bookForm-heading').html('Traveller'+ (i)+' Information');
    }
    $('.bookForm').show();
  });
});

.bookForm{
  background-color:green;
  padding:5px;
  margin:5px;
}
#travellersNumber{
  width:150px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group">
  <label>Number of travellers</label>
  <select class="form-control" id="travellersNumber" name="trav">
    <option value="0">Select Numbers Of Travellers</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
  </select>
</div>
<div class="bookForm row">
  <div class="col-xs-12">
    <h3 class="bookForm-heading">Submit your details</h3>
  </div>
  <div class="col-xs-12">
    <div class="form-group">
      <label>First Name</label>
      <input class="form-control" name="firstName">
    </div>
  </div>
</div>

Answer 2

Hope this is what you want.

$(function () {
	$("#travellersNumber").on('change', function () {
		var traveller = $(this);
		var form = $("#original");
		var heading = $('.bookForm-heading');
		var travellerValue = parseInt(traveller.val());
		$("#original").hide();

		$("[id*='original_']").not("#original").remove(); //Remove all forms except original form

		for (i = 0; i < travellerValue; i++) {
			if (i == 0) {
				heading = heading.html('Traveller 1 Information');
				$("#original").show();
			}
			else
			{
				var cloneDiv = form.clone().prop("id", "original_" + i).appendTo("#travellersDetail");
				cloneDiv.find(".bookForm-heading").html('Traveller ' + (i + 1) + ' Information');
			}
		   
		}
	});
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>
	.bookForm {
		display: none;
	}
</style>

<div class="form-group">
	<label>Number of travellers</label>
	<select class="form-control" id="travellersNumber">
		<option value="0">Select Numbers Of Travellers</option>
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="4">4</option>
		<option value="5">5</option>
		<option value="6">6</option>
		<option value="7">7</option>
		<option value="8">8</option>
		<option value="9">9</option>
		<option value="10">10</option>
	</select>
</div>

<div class="bookForm" id="original">
	<div class=col-xs-12>
		<h3 class="bookForm-heading">Submit your details</h3>
	</div>
	<div class="col-xs-12 col-md-3">
		<div class=form-group>
			<label>First Name</label>
			<input class=form-control name=firstName>
		</div>
	</div>
</div>

<div id="travellersDetail"></div>

Answer 3

<select id='populate' onchange='populate();'></select>
<div id='myform'></div>

function populate()
{
var forms=$("#populate").val();
if (forms!=0)
{
var formelements='';
for (i=1; i<=forms; i++)
{
var formelements .= "<div class=bookForm>" +i+ "</div>";
}
$("#myform").html(formelements);
}

}