html - jQuery .append finishing div on its own? -

i have div <div id="articles-feed"> i'm trying append more stuff. getting json data parse json.parse, format bit , try add code.

the thing is, parsed data contains array of categories, , need display of them, figure i'd .append 3 times, for-loop in between relevant data.

now strange thing happens when run function, </div> gets added after first .append, 2nd , 3rd .append added outside of <div class="article-box">. if try target class directly using $('.article-box') 2nd .append, nothing happens.

can figure out i'm doing wrong?

my html:

<div id="articles-sidebar">     <h2>search articles archive:</h2>     <form id="searchbox" method="post">         <input name="searchword" type="text" placeholder="author, title, keyword...">         <input type="submit" value="search">     </form> </div> <div id="articles-feed"> </div> <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <script src="js/articles.js"></script> 

my jquery:

    for(var x = 0; x<response.length; x++) {         //format date         var posted = new date((response[x].posted * 1000));         //format extract line brakes         var extract = response[x].extract.replace(/(\r\n|\n|\r)/gm,"<br>");         //format categories         var categories = response[x].cat_name.split(",");         //append json html          $("#articles-feed").append(             '<div class="article-box"><h1><a href="#">'+response[x].title+             '</a></h1><h3><a href="#">' +response[x].name+             '</a>&nbsp;|&nbsp;'+ posted.tolocaledatestring()+             '</h3><ul class="article-categories">');         for(x=0; x<categories.length;x++) {             $('#articles-feed').append(                     '<li class="article-category">' + categories[x] + '</li>'                 ); //end categories append data                 if (categories[x] == "free") {                     $(".article-box").addclass("free");                 }         }// end categories append loop         $("#articles-feed").append(             '</ul><p>'+extract+'</p></div>'             ); //end article feed 3rd append      } //end article feed loop 

var output = '<div class="article-box"><h1><a href="#">'+response[x].title+             '</a></h1><h3><a href="#">' +response[x].name+             '</a>&nbsp;|&nbsp;'+ posted.tolocaledatestring()+             '</h3><ul class="article-categories">'; for(x=0; x<categories.length;x++) {     var output = output + '<li class="article-category">' + categories[x] + '</li>';     if (categories[x] == "free") {          $(".article-box").addclass("free");     } } var output = output + '</ul><p>'+extract+'</p></div>';  $("#articles-feed").append(output); 

this working. tried working me