Hotel Room / Person / Children / Age Function

Hotel Room / Person / Children / Age Function

HTML

number of rooms<br />
            <select id="itemCount" name="itemCount">
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
            </select>
            
          <hr />
            <div id="cloneWrap1" class="room">
  <!-- Clone Item Start -->
              number of persons room<br />
                Adults
              <select name="cloneElement1" id="item_dup_1" class="person">
                    <option value="1">1</option>
                    <option selected value="2">2</option>
                    <option value="3">3</option>
                </select>
                Children
                <select class="childrenRoom person">
                    <option selected value="0">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                </select>
              </div>
<!-- Clone Item End -->
            <hr />
          </div>
          Resolution rooms | persons<br />
          <input type="text" name="gsNumberOfTravelers" id="gsNumberOfTravelers" value="2"> <br />

JavaScript

// FN room  # of rooms + # of pax //
    jQuery.fn.fieldsManage = function (number) {
        var ele = $(this);
        var clones = ele.data("clones");
        clones = clones ? clones : new Array(ele.attr("id"));
        if (clones.length < number) {
            var clone;
            while(clones.length < number) {
                clone = ele.clone(true);
                var id = clones[0]+clones.length;
                clone.attr("id", id);
                $("#"+clones[clones.length-1]).after(clone);
                clones.push(id);
            }
        } else {
            while(clones.length > number) {
                $("#"+clones.pop()).remove();
            }
        }
        ele.data("clones", clones);
    }

    $(document).ready(function() {
        $("#itemCount").change(function() {
            $("#cloneWrap1").fieldsManage(this.value);
            calculateNumbers();
        });
        $('.room').live('change', function(){
            calculateNumbers();
        });
    });

    function calculateNumbers(){
        var gsNumberOfTravelers = [];
        var total = 0;
        $('.room').each(function() {
            total = 0;
            $(this).children('.person').each(function(){
                total = total + parseInt($(this).val());
            });
            gsNumberOfTravelers.push(total);
        });
        
        
        $("[name='gsNumberOfTravelers']").val(gsNumberOfTravelers.join('|'));
    };