How to find and set the correct div for a cloned drop-down list

Question

I have a plugin that displays a drop-down list of pdf's. (It displays a different list of files on different pages in the website).

I needed to clone that plugin, which is always included at the bottom of it's page, so that the same drop-down list also appears at the top of the page it is on. Got that working with jquery.

The problem is that, although the (cloned) top drop-down works fine, when you click on the bottom 'upload' button, it tries to use the top's selected option. So no matter which option you select in the bottom drop-down, the bottom upload button uses whatever option is selected in the top drop-down.

I have the plugin code (extract below) and want to add some code to find the unique id of the parent div's, and with that use the correct drop-down context/focus.

Tried a lot of code, but don't really know php, so keep getting stuck with it. My 1st objective is to find the right place in the code to correct the focus. So I'm currently trying to get a debug thing working .....

PHP:

while ($rs = mysql_fetch_array($qry))
{   
    echo "<option value='{$rs[url]}|{$rs[target]}'>$rs[link_name]</option>";

    echo "<script type='text/javascript'>console.log('{$rs[url]}|{$rs[target]}');</script>";
}   

echo "</select> <input type='button' class='EZJumpMenuButton'  value=' Go ' onclick=\"javascript:goUrl('$val');\">";
echo "</div>";
?>

Javascript:

<script>    
    if(typeof goUrl != 'function') {
        function goUrl(id)
        {

         $(".EZJumpMenu").click(function() {
                console.log("this div (2) = " + $(this).parent().attr('id')); 
         });


            var str1= document.getElementById('link_url'+id+'').value;
            console.log("str1 = " + str1);   

            if(str1 != '')
            {
                var str = str1.split("|");
                console.log("str = " + str + "AKS");   

                if(str[1]=='_top') location.href= str[0];
                else if(str[1]=='_blank') {
                    mywin=  window.open (str[0],"mywindow");
                }
                else if(str[1]=='_self') {
                //      alert("link to : "+str[0]);
                    self.location.href = str[0];
                }
                else if(str[1]=='_parent') {
                    parent.location.href = str[0];
                }
                else if(str[1]=='frameset') {
                var linkto="http://<?=$_SESSION['docroot_url']?>/sohoadmin/plugins/JumpMenu/frameset.php?goto="+str[0];
                    mywin1=  window.open (linkto,"myframe");
                }
            }
        }
    }
</script>

The 2nd 'echo' line in the loop is mine - trying to display whats going on at this point in the php; it shows the expected pdf options in the drop-down (e.x. http://xxx.co.nz/media/yyyy.pdf|_blank).

Function goUrl(id) seems to be what actually displays the selected pdf. NB: var str contains the correct file when testing the top menu, but is blank when testing the bottom menu. So I am assuming I must set the context BEFORE goUrl is called.

The 1st jquery bit is mine - it correctly displays which of the unique div's was clicked (either botJumpMenu or topJumpMenu). Note that from cloning, there are common classes)

---

1. How can I include the following in my php echo line? (I think this is where I might be able to set the correct div... somehow):

   $(this).parent().attr('id') 
   

   I've tried:

   console.log('{$rs[url]}|{$rs[target]}|$(this).parent().attr('id')');
   

   but it gives an error.

---

2. Am I on the right track to get this working, or is there something I am missing?