JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="travel_tour-info">
  <h3>How many people are you booking for?
										<select name="travellers" id="travellers">
											<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>										
										</select>
									</h3>
</div>
<div class="col-md-7 well" id="passanger">
  <span id="person-1"><h5>Passenger 1 Lead traveller</h5></span>
  <div class="form-group">
    <label for="title" class="control-label col-sm-3 required">Title</label>
    <div class="col-sm-8">
      <select name="title" id="title" class="form-control">
        <option value="Mr.">Mr</option>
        <option value="Mrs.">Mrs.</option>
        <option value="Ms.">Ms.</option>
        <option value="Miss">Miss</option>
      </select>
    </div>
  </div>
  <div class="form-group">
    <label for="name" class="control-label col-sm-3 required">First name</label>
    <div class="col-sm-8">
      <input type="text" name="f_name" class="form-control" id="fname-1" placeholder="Enter name">
    </div>
  </div>
  <div class="form-group">
    <label for="address" class="control-label col-sm-3">Middle name</label>
    <div class="col-sm-8">
      <input type="text" name="m_name" class="form-control" id="mname-1" placeholder="Enter address">
    </div>
  </div>
  <div class="form-group">
    <label for="name" class="control-label col-sm-3 required">Last name</label>
    <div class="col-sm-8">
      <input type="text" name="l_name" class="form-control" id="lname-1" placeholder="Enter name">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-lg-3 col-md-4 col-sm-4 col-xs-12 required"> Date of Birth:</label>
    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
      <div class="row">
        <!-- added div.row -->
        <div...

JavaScript

$(document).ready(function () {
    $('#travellers').change(function() {
        var travellerSelected = $('#travellers option:selected').val();
        var travellerDisplayed = $('[id^="person1-"]:visible').length;
        var travellerRendered = $('[id^="person-"]').length;
        
        if (travellerSelected > travellerDisplayed) {

            for (var i=1;i<=travellerSelected;i++){
                var r=$('#travellers-'+i);
                if (r.length == 0) {

                    var clone=$('#travellers-1').clone(); //clone
                    clone.children('#person1 h5').text("Traveller "+i);
                    //change ids appropriately
                    setNewID(clone,i);
                    clone.children('div').each(function() {
                        setNewID($(this),i);
                    });
                    $(clone).insertAfter($('#travellers-'+travellerRendered));
                    
                }else {
                    $(r).show();
                }
            }
            
        }
        else {
            for (var i=++travellerSelected;i<=travellerRendered;i++){
                $('#travellers-'+i).hide();
            }
        }
    
    });
    function setNewID(elem, i) {
        oldID=elem.attr('id');
        newId=oldID.substring(0,oldID.indexOf('-'))+"-"+i;
        elem.attr('id',newId);
    }

});