plus minus buttons Bootstrap with popover form

by bizamajig

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.js"></script>
<div class="container"> 
<div class="row-fluid">
<div class="offset2">
       
<div class="btn-group inline party span4">  
    
    
    <label>Rooms 
    <a class="minus btn-small btn btn-inverse" href="#"><i class="icon-minus icon-white"></i></a>
<span id="roomcount" class='label'>0</span>
<a class="plus btn-small btn btn-inverse" href="#"><i class="icon-plus icon-white"></i></a>
        </label> 
    </div>
<br clear="all" />
      
    </div></div></div>
    
    

    

<div class='container span4'>
    
<button class="btn btn-inverse btn-small" data-toggle='popover' data-placement="right" id='travelpeople' data-original-title="Travelers">FORM</button> 

    
    
<div id="peoplerooms" style="display:none">
        <div class="btn-group inline">
          <button class='qtyplus input-mini btn btn-inverse' field='quantity'><i class="icon-plus icon-white"></i></button>  
          <input type='text' name='quantity' value='0'  class="input-mini qty"/>
          <button type='button' value='-' class='qtyminus input-mini btn btn-inverse' field='quantity'><i class="icon-minus icon-white"></i></button>
    </div>
       </div>
    
<br clear="all" />
    
 Rooms:<select name="rooms" id='rooms'>
  <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select><br>
<div id="room-1" class='well'>
    <span class='label label-inverse'>Room 1:</span>
<br clear="all" />
<div class='left' >Adults:<select id='adults-1'><option>1</option>
        <option>2</option>
        <option>3</option>
     <option>4</option></select>
    </div>
    <br clear="all" />
 <div class='left'>Children:<select id="children-1">
        <option selected="selected">0</option>
        <option>1</option>
        <option>2</option>
       ...

CSS

body {
    padding: 40px;
}
div.party {
    width:9px;
    margin:4px 5px 0px 5px
}
.party #roomcount {
 font-size:15px;   
}

JavaScript

$(document).ready(function () {
    //onchange of rooms-count

    $(document).on('change', '#rooms', function () {



        var roomsSelected = $('#rooms option:selected').val();
        var roomsDisplayed = $('[id^="room-"]:visible').length;
        var roomsRendered = $('[id^="room-"]').length;
        var orig = $('#peoplerooms').find(roomsSelected);

        //if room count is greater than number displayed - add or show accordingly
        if (roomsSelected > roomsDisplayed) {

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

                    var clone = $('#room-1').clone(); //clone
                    clone.children(':first').text("Room " + i);
                    //change ids appropriately
                    setNewID(clone, i);
                    clone.children('div').children('select').each(function () {
                        setNewID($(this), i);
                    });
                    $(clone).insertAfter($('#room-' + roomsRendered));

                } else {
                    //if the room exists and is hidden 
                    $(r).show();
                }
            }

        } else {
            //else if less than room count selected - hide
            for (var i = ++roomsSelected; i <= roomsRendered; i++) {
                $('#room-' + i).hide();
            }
        }

    });

    function setNewID(elem, i) {
        oldID = elem.attr('id');
        newId = oldID.substring(0, oldID.indexOf('-')) + "-" + i;
        elem.attr('id', newId);
    }

});







// TOP CONTROLS
$('.plus').click(function (e) {
        e.preventDefault();
    var sp = parseFloat($(this).prev('span').text());
    $(this).prev('span').text(sp + 1);
});

$('.minus').click(function (e) {
        e.preventDefault();
    var sp = parseFloat($(this).next('span').text());
    $(this).next('span').text(sp - 1);
    if (!isNaN(sp) && sp > 0) {
       ...