When I duplicate this code, it doesn't work the same

I've duplicated this code and added it just below the original, in order to have two rows (see attached image). Yet when I select the word 'Pictures' on the second row, the images still appear in the first row. How can I get the images to appear in the second row, when I select the word 'Pictures' in the second row?

Here's the code that I duplicated:

<div id="MP_Right_Container">
<!-- MP Right 1 -->
<div id="MP_Right_1">
<div id="MP_Right_1_top">&nbsp;&nbsp;&nbsp;[var.lang_my_media]</div>
<div id="MP_Right_1_content">
<div id="MP_Right_1_submenu">
<ul id="MP_Right_1_submenu_list1">
<li><a href="javascript:void(0)" onClick="javascript:ahahscript.ahah('[var.base_url]/memberprofile_ajax.php?type=1&uid=[var.member_id]&page=1', 'Ajax-Media', '', 'GET', '', this);">[var.lang_word_videos]</a></li>
<li>
<a href="javascript:void(0)" onClick="javascript:ahahscript.ahah('[var.base_url]/memberprofile_ajax.php?type=3&uid=[var.member_id]&page=1', 'Ajax-Media', '', 'GET', '', this);">[var.lang_pictures]</a>
<!--[onload;block=li;when [var.enable_images]=1]-->
</li>
</ul>
</div>
<div id ="Ajax-Media">
<!------------------------------------------------------------------- Start of My Videos -->
<div class="MyMedia">
<!--[onload_801;block=div;when [var.load_media]=1;comm]-->
<div class="MyMedia_1">
 <ul>
<li><a href="[var.base_url]/videos/[membersmedia.indexer;block=div]/[membersmedia.title_seo;block=div]"  title="[membersmedia.title;block=div]"><img border="0" src="[var.base_url]/uploads/thumbs/[membersmedia.video_id;block=div].jpg" width="85" height="75" alt="thumb" /></a></li>
<li>
<a href="[var.base_url]/videos/[membersmedia.indexer;block=div]/[membersmedia.title_seo;block=div]"  title="[membersmedia.title;block=div]">
<!--[membersmedia.title;block=div;ope=max:10;comm]--></a>
</li>
<!--//////// PERMISSIONS CHECK - VIDEO START \\\\\\\\-->
<li>
<a href="edit/editvideo.php?id=[membersmedia.indexer;block=div]" rel="gb_page_center[850, 450]"  title="[var.lang_edit]">
<img src="[var.base_url]/themes/[var.user_theme]/images/icons/edit_small.png" alt="delete" width="14" height="14" border="0" /></a>&nbsp;
 <a href="edit/delete.php?type=1&id=[membersmedia.indexer;block=div]" rel="gb_page_center[700, 450]"  title="[var.lang_delete_general]"  onClick="return(window.confirm('[var.confirm_popup_javascript]'))">
<img src="[var.base_url]/themes/[var.user_theme]/images/icons/delete_small.png" alt="delete" width="14" height="14" border="0" /></a>
<!--[onload_824;block=li;when [var.show_edit_delete]=1;comm]-->
</li>
<!--//////// PERMISSIONS CHECK - VIDEO END \\\\\\\\-->
</ul>
</div>
</div>
<!-- Media Pagination start -->
<div class="MP_pagination">
<!--[onload_802;block=div;when [var.load_media]=1;comm]-->
<ul><li>[var.show_pages_vids;htmlconv=no]</li></ul>
</div>
 <!-- Media Pagination end -->
 <!------------------------------------------------------------------- End of My Videos -->
</div>
</div>
<div id="MP_Right_1_bottom"></div>
</div>

PHP:

 

This has nothing to do with PHP whatsoever.

But my best guess is you're using the wrong IDs. Take a look at the occurrences of "Ajax-Media".