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();

```