Question

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

This is output from my PHP code with json_encode:

[{
    "guide": null,
    "residence": [{
        "name_r": "jack"
    }, {
        "name_r": "jim"
    }, {
        "name_r": "sara"
    }],
    "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"]
    }]
}]

And is my js code in ajax call ($.ajax({...):

success: function (data) {
    $.each(data[0].residence, function (index, value) {
        $('ol#residence_name').append('<li><a href="" class="tool_tip" title="ok">' + value.name_r + '</a><div class="tooltip"></div></li>');
        var info = data[0].residence_u[index];
        $.each(info.units, function (index, value) {
            $('ol#residence_name li .tooltip').append(value + ' & ' + info.extra[index] + ' & ' + info.price[index] + '<br>');
        })
    });

Now by above js code, i have in output this:

jack
hello & 11 & 1,111,111
how & 22 &
2,222,222
what & 33 & 3,333,333,
fine & 44 & 4,444,444
thanks & 55 & 5,555,555
good & 66 & 6,666,666

jim
fine & 44 & 4,444,444
thanks & 55 & 5,555,555
good & 66 & 6,666,666

sara
thanks & 55 & 5,555,555
good & 66 & 6,666,666

I want as:

jack
hello & 11 & 1,111,111
how & 22 &
2,222,222
what & 33 & 3,333,333,

jim
fine & 44 & 4,444,444

sara
thanks & 55 & 5,555,555
good & 66 & 6,666,666

What do i do?

Answer 1

Keep a reference to the tooltip element and append the info to it:

var $li = $('<li><a href="" class="tool_tip" title="ok">' + value.name_r + '</a></li>');
var $tooltip = $('<div class="tooltip"></div>').appendTo($li);

var info = data[0].residence_u[index];

$.each(info.units, function (index, value) {
    $tooltip.append(value + ' & ' + info.extra[index] + ' & ' + info.price[index] + '<br>');
});

$li.appendTo('#residence_name');

---

Why does your code produce this result?

Because $('ol#residence_name li .tooltip') will select every .tooltip element in every li inside #residence_name, not just the currently created one.