The HTML code is as follows:

2. <div class="categories" style=" margin-left: 10px; width: 930px; margin-top: 15px; margin-bottom: 15px;">
3. <div class="box1" style="float: left; text-align: center; width: 215px; height: 240px; margin-right: 15px; background-color: #fff;"><h3></h3>
4. <ul class="products" style="width: 200px; height: 230px; margin-left:auto; margin-right: auto; overflow: hidden;">
5. </ul>
6. </div>
7. <div class="box2" style="float: left; text-align: center; width: 215px; height: 240px; margin-right: 15px; background-color: #fff;"><h3></h3>
8. <ul class="products" style="width: 200px; height: 230px; margin-left:auto; margin-right: auto;">
9. </ul>
10. </div>
11. <div class="box3" style="float: left; text-align: center; width: 215px; height: 240px; margin-right: 15px; background-color: #fff;"><h3></h3>
12. <ul class="products" style="width: 200px; height: 230px; margin-left:auto; margin-right: auto; overflow: hidden;">
13. </ul>
14. </div>
15. <div class="box4" style="float: left; text-align: center; width: 215px; height: 240px; background-color: #f8f8f8;"><h3></h3>
16. <ul class="products" style="width: 200px; height: 230px; margin-left:auto; margin-right: auto; overflow: hidden;">
17. </ul>
18. </div>
19. </div>

The jQuery code catches some elements from another part of the page and appends them in these boxes I can append the jQuery elements in the first box but not in other box. I'm able to append text to the other boxes but when I run the following jquery code:

2. $('.tab_content ul').eq(0).children('li').each(function() {
3. var url = $(this).children('a').eq(0).attr('href');
4. var string = $(this).text();
5. var str = string.replace('Add to cart', '');
6. var str2 = str.replace('Show Details', '');
7. var str3 = str2.replace('$', '<br/><b>$');
8. str3 += '</b>';
9. var img = $(this).children('.thumbnail_container').children('.thumbnail_container_inner').children('img').attr('src');
10. $('.box1 ul.products').append('<li style="width: 200px; text-align: center;"><a class="prev" style="top:100px; left: 0px; float: left; position: absolute; cursor: pointer;">prev</a><img src=\"' + img + '\" style=\"margin-left: auto; margin-right: auto;\" width=\"150\" height=\"150\"><br/>' + str3 + ' <a class="next" style="float: right; top: 100px; right: 0px; position: absolute; cursor: pointer;">next</a></li>');
11. });

It works for the first box. If I try to use the same code to append these in box 2 it doesn't work. Waiting for your response