javascript - Why do these values repeat when outputted from my .ajax() request? -

i have no idea what's going on snippet of code. i'm trying output values json request using .ajax().

this line of code:

$.each(posts, function(k, v){     $("section ul").append("<li><p>" + v.webtitle + "</p></li>");    }); 

outputs title of each post in p tag on 1 line. added pull thumbnail url too

$("section ul li").append("<p>" + v.fields.thumbnail + "</p>");      

however, line outputs this

json preview

could tell me:

• why happening images not text
• how can amend code output 1 image per list item

i think should work

$.each(posts, function(k, v){     var li = $("<li>"); // create single li element     li.append("<p>" + v.webtitle + "</p><p>" + v.fields.thumbnail + "</p>"); // append before lose reference     $("section ul").append(li); // append once ul }); 

the main idea append more content <li> before lose reference it. jquery in code create li, append ul, , forget it, doesn't keep reference it. , in next line finding again <li> elements, received of them, not last one.