Room count Head Count system

Room count Head Count system - Andrew Pougher

by Andrew Pougher

HTML

<div id="hotel-guests"> <span class="wrapper">
    <label for="num-adults">Number of Rooms:</label>
    <select name="hotelroomnumbers" id="num-adults" class="traveler-dropdown">
        <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="room-1" class="room"><span> Room #1:</span>
 <span class="wrapper">
    <select name="room" class="roomcount">
        <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>
    </select>
</span>

    </div>
</div>


<div id="eanrooms"></div>

JavaScript

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

           $(document).on('change', '#num-adults', function () {
        var roomsSelected = $('#num-adults option:selected').val();
        var roomsDisplayed = $('[id^="room-"]:visible').length;
        var roomsRendered = $('[id^="room-"]').length;
        
        if (roomsSelected > 0) {
           $('.adult label').show();
        } else {
           $('.adult label').hide(); 
        }
        //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 to suit
                    setNewID(clone,i);
                    clone.children('div').children('select').each(function() {
                        setNewID($(this),i);
                    });
                    $(clone).appendTo($('.adult'));
                    
                }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);
    }

   
            $(document).on('change', '.roomcount', function (elem, i) {
                        var str = ''
                        var str1 = $("[id^='room-']:visible").map(function () {
                            return this.id + "=" +   $('option:selected',this).val();
                       ...