Hotel Room Head (Adult + Children) Count system w' Bootstrap

Room count Head Count system - w' Bootstrap Andrew Pougher

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>
<i id="pop1" class="icon-user pop" data-placement="bottom"></i>



<div id="pop1_content" class="popSourceBlock">
    <div class="popTitle" style="display:none">
      <i class='icon-remove close'></i>
    </div>
    <!-- start popover -->
    <div class="popContent" style="display:none">
        <div id="hotel-guests"> <span class="wrapper">
    <label for="num-adults">Number of Rooms:</label>
    <select name="hotelroomnumbers" id="num-adults" class="traveler-dropdown btn-mini btn-inverse">

        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>

    </select>
</span> 
    </div>
    <div class="adult">
        <div id="room1" class="room"><span> Room #1:</span>
 <span class="wrapper">
    <select name="room" class="roomcount btn-mini">
        <option value="0">0</option>
        <option selected 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>
</select><i class="icon-plus-sign addkids" rel="tooltip" title="Click to add Children" data-placement='left'></i>
   <div class='childwrap' style='display:none'>
     <span>Child Age:</span>
         <select name="children" class="childrencount btn-mini">
        <option  selected value="0">0</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...

CSS

body {
    margin:40px 80px 0px 180px
}
.popover-inner {
    width:240px
}

.pop{cursor:pointer}

#num-adults {
    width:100%
}
label, .room span{font-size:9px}

.roomcount,.childrencount {
    width:43px;
    display:inline-block;
}
.childwrap{display:inline;visibility:hidden}

.addkids {
   margin-left:7px;margin-top:-4px;
    cursor:pointer;
}

select.btn {
    -webkit-appearance: button;
       -moz-appearance: button;
            appearance: button;
    width: auto;
}

select.btn-mini {
    height: auto;
    line-height: 14px;
    padding-right: 16px;
}

select.btn-mini + .caret {
    margin-left: -20px;
    margin-top: 9px;
}


.close{margin-top:-6px;margin-right:-6px}

#eanrooms {
    position:absolute;
    top:60%
}

JavaScript

(function ($) {
    
var pplcnt;
if (localStorage.getItem("rmCnt")  === null) {
pplcnt = 'room1=1';
localStorage.setItem('rmCnt', pplcnt);
};
  
   
         // first Run get t/l rooms from LS
       getTotalRooms(); // how many rooms from LS
       runRooms(); // less or more options 


    $(".pop").each(function() {
    var $pElem= $(this);
    $pElem.popover(
        {
          title: getPopTitle($pElem.attr("id")),
          content: getPopContent($pElem.attr("id")),
            trigger: 'click',
        }
    );
}).click(function() {
        $(this).popover('toggle');
    runRooms(); // less or more options 
    SetCorrectddlVals();// show num ppl in rooms
    $(".popover  [rel=tooltip]").tooltip(); // trigger tool tip
      $('.childrencount').filter(function() {
          if($(this).val() > 0){
          $(this).closest('.childwrap').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0}).show();
          }
});
       
    });
	
  

// CONTENT AND TITLE FILL
function getPopTitle(target) {
    return $("#" + target + "_content > div.popTitle").html();
};
		
function getPopContent(target) {
    var $popContent = $("#" + target + "_content > div.popContent").html();
     runRooms(); // less or more options 
    return $popContent;
};

// FNs


function getTotalRooms() {
    if (!localStorage.getItem("rmCnt")) {
        localStorage.setItem('rmCnt', 'room1=1');
        $("#num-adults option[value='" + count.length + "']").attr("selected", "selected");
    } else {

        var string = localStorage.getItem("rmCnt");
        var count = string.split("&"); // for the room ddl
        // preSelect the # rooms from LS length 
    } // end localCheck
    $("#num-adults option[value='" + count.length + "']").attr("selected", "selected");
}
/*---------------------------------------------------
   Set Select DDls to values saved.
    ----------------------------------------------------*/
function SetCorrectddlVals(){
  var string =...