<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"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 rb"> From </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 rb"> TO </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 rb"> <div class="control-group" id="fields"> <div class="controls"> <form role="form" autocomplete="off"> <div class="entry input-group "> <div class="row rb"> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-3 "> <span class="roomlabel">ROOM 1:</span> </div> <div class="col-lg-9 col-md-8 col-sm-6 col-xs-9 nogutter"> <select class="form-control" style="" id="occupancy" name="occupancy[]"> <option value="1">1 Person</option> <option selected value="2">2 People</option> <option value="3">3 People</option> <option value="4">4 People</option> <option value="5">5 People</option> <option value="6">6 People</option> <option value="7">7 People</option> <option value="8">8 People</option> <option value="9">9 People</option> </select> <span class="input-group-btn"> <button class="btn btn-success btn-add" type="button"> <span class="glyphicon glyphicon-plus"></span> </button> </span> </div> </div> </div> </form> </div> </div> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 text-center rb"> SUBMIT </div> </div> </div>

.entry:not(:first-of-type) { margin-top: 10px; } .glyphicon { font-size: 12px; } .btn-add, btn-remove {} .rb {border:1px solid red;} .nogutter { margin-left: 0px; margin-right: 0px; padding-left: 0px; padding-right: 0px; } .roomlabel {font-size:1.1rem;line-height:30px} select.form-control{ max-width:75%} /* Large Devices, Wide Screens */ @media only screen and (max-width : 1200px) { } /* Medium Devices, Desktops */ @media only screen and (max-width : 992px) { select.form-control{ max-width:75% !important} } /* Small Devices, Tablets */ @media only screen and (max-width : 768px) { } /* Extra Small Devices, Phones */ @media only screen and (max-width : 480px) { } /* Custom, iPhone Retina */ @media only screen and (max-width : 320px) { }

$(function() { $(document).on('click', '.btn-add', function(e) { e.preventDefault(); var controlForm = $('.controls form:first'), currentEntry = $(this).parents('.entry:first'), newEntry = $(currentEntry.clone()).appendTo(controlForm); newEntry.find('input').val(''); controlForm.find('.entry:not(:last) .btn-add') .removeClass('btn-add').addClass('btn-remove') .removeClass('btn-success').addClass('btn-danger') .html('<span class="glyphicon glyphicon-minus"></span>'); }).on('click', '.btn-remove', function(e) { $(this).parents('.entry:first').remove(); e.preventDefault(); return false; }); });