Problem with $.each() in jQuery

I want append some from array by jQuery.each and data hotel_id, number each hotel_id is 4, and this loop $.each(data[0].hotel_id,... }); run 4 times contents inside self, in case that there are or inserted in database rows residence_u and residence_p 3 times (each of they there are 3, not 4(like hotel_id)), when run the following code, this code not have error jus not work. if i remove codes $.each(info_ru.units,... }); and $.each(info_rp.start_date,... }); it worked: How can fix it?

See full my js code: [http://pastebin.com/jBWEDZrN][1]

This is summary from my js code in ajax call(url: 'get_gr',):

$.each(data[0].hotel_id, function (index, value) {
    var $li = $('<li><input name="hotel_id[]" value="' + value.hotel_id + '" style="display:none;"></li>');
    var $tooltip = $('<div class="tooltip"></div>').appendTo($li);
    $li.appendTo('#residence_name');

    var info_ru = data[0].residence_u[index];
    $.each(info_ru.units, function (index, value) {
        $tooltip.append(value + ' & ' + info_ru.extra[index] + ' & ' + info_ru.price[index] + '<br>');
    });

    var info_rp = data[0].residence_p[index];
    $.each(info_rp.start_date, function (index, value) {
        $tooltip.append(value + ' & ' + info_rp.end_date[index] + ' & ' + info_rp.price_change[inde开发者_如何转开发x] + '<br>');
    });
    tool_tip()
});

This is output php code(url: 'get_gr',):

[{
    "guide": null,
    "hotel_id": [{
        "hotel_id": ["1"]
    }, {
        "hotel_id": ["2"]
    }, {
        "hotel_id": ["3"]
    }, {
        "hotel_id": ["4"]
    }],
    "residence_u": [{
        "units": ["hello", "how", "what"],
        "extra": ["11", "22", "33"],
        "price": ["1,111,111", "2,222,222", "3,333,333"]
    }, {
        "units": ["fine"],
        "extra": ["44"],
        "price": ["4,444,444"]
    }, {
        "units": ["thanks", "good"],
        "extra": ["55", "66"],
        "price": ["5,555,555", "6,666,666"]
    }],
    "residence_p": [{
        "start_date": ["1111", "2222"],
        "end_date": ["1111", "2222"],
        "price_change": ["1111", "2222"]
    }, {
        "start_date": ["3333", "4444"],
        "end_date": ["3333", "4444"],
        "price_change": ["3333", "4444"]
    }, {
        "start_date": ["5555", "6666"],
        "end_date": ["5555", "6666"],
        "price_change": ["5555", "6666"]
    }]
}]

Update:

I insert several(array) value with json_encode in one row from database table, now want echo they as order with jquery.

Output js code is this:

1

hello & 11 & 1,111,111

how & 22 & 2,222,222

what & 33 & 3,333,333,

1111 & 1111 & 1111

2222 & 2222 & 2222

2

fine & 44 & 4,444,444

3333 & 3333 & 3333

4444 & 4444 & 4444

3

thanks & 55 & 5,555,555

good & 66 & 6,666,666

5555 & 5555 & 5555

6666 & 6666 & 6666

4

You only have 3 elements in your residence_u and 2 in residence_p arrays, but 4 in the original hotels array. Could it be as simple as to check for a valid info_ru

var info_ru = data[0].residence_u[index];
if ( infor_ru != null ) {
    $.each(info_ru.units, function (index, value) {
        $tooltip.append(value + ' & ' + info_ru.extra[index] + ' & ' + info_ru.price[index] + '<br>');
    });
}

before continuing with the each?