How do I append data retrieved via Ajax correctly to the DOM?
<p>I insert several(<code>array</code>) value with <code>json_encode</code> in one row from database table, now want echo they as order with jquery.</p>

<p>This is output from my PHP code with <code>json_encode</code>:</p>

<pre><code>[{
    "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"]
    }]
}]
</code></pre>

<p>And is my js code in ajax call (<code>$.ajax({...</code>):</p>

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

<p><strong>Now by above js code, i have in output this:</strong></p>

<blockquote>
  <p><code>jack</code><br> <code>hello</code> &amp; <code>11</code> &amp; <code>1,111,111</code><br> <code>how</code> &amp; <code>22</code> &amp;
  <code>2,222,222</code><br> <code>what</code> &amp; <code>33</code> &amp; <code>3,333,333,</code><br> <code>fine</code> &amp; <code>44</code> &amp; <code>4,444,444</code><br>
  <code>thanks</code> &amp; <code>55</code> &amp; <code>5,555,555</code><br> <code>good</code> &amp; <code>66</code> &amp; <code>6,666,666</code><br></p>
</blockquote>

<p><p></p>

<blockquote>
  <p><code>jim</code><br> <code>fine</code> &amp; <code>44</code> &amp; <code>4,444,444</code><br> <code>thanks</code> &amp; <code>55</code> &amp; <code>5,555,555</code><br> <code>good</code> &amp; <code>66</code> &amp; <code>6,666,666</code><br></p>
</blockquote>

<p><p></p>

<blockquote>
  <p><code>sara</code><br> <code>thanks</code> &amp; <code>55</code> &amp; <code>5,555,555</code><br> <code>good</code> &amp; <code>66</code> &amp; <code>6,666,666</code><br>
  <p></p>
</blockquote>

<p><strong>I want as:</strong></p>

<blockquote>
  <p><code>jack</code><br> <code>hello</code> &amp; <code>11</code> &amp; <code>1,111,111</code><br> <code>how</code> &amp; <code>22</code> &amp;
  <code>2,222,222</code><br> <code>what</code> &amp; <code>33</code> &amp; <code>3,333,333,</code><br></p>
</blockquote>

<p><p></p>

<blockquote>
  <p><code>jim</code><br> <code>fine</code> &amp; <code>44</code> &amp; <code>4,444,444</code><br></p>
</blockquote>

<p><p></p>

<blockquote>
  <p><code>sara</code><br> <code>thanks</code> &amp; <code>55</code> &amp; <code>5,555,555</code><br> <code>good</code> &amp; <code>66</code> &amp; <code>6,666,666</code><br></p>
</blockquote>

<p>What do i do?</p>
