Hello World! Long time lurker, first time poster. Before the question, just wanted to say thanks for this website and the snippets; have been a huge help. Do miss the frog though post redo (think it was a frog?).

Just as a disclaimer, I am not a real web designed by any means, so don't assume that I have done the equivalent of turning on the power button.

I am trying to implement the Styled Popup Menu on a wordpress site. The function has it's own .js file that I call through wp_enqueue in my functions.php file.

When I just have one of these on a page, it works like a charm (using to display links to all post categories). When I add a second implementation on the same page (to show all tags), both implementations display the list of tag links.

Is there a way to implement this function on multiple elements on the same page with the same class names so that each implementation will show their own specific lists, or will I need to have a separate function written/wp_enqueue'd/etc... for unique class names for all elements?

Unfortunately I am designing the site on local host so I cannot link to show it, but my code of the functions and html are below. Any advice would be greatly appreciated.

styleddropdown.js ($ replaced by jQuery)

  (function(jQuery){
    jQuery.fn.styleddropdown = function(){
        return this.each(function(){
          obj = jQuery(this)
          obj.find('.field').click(function() { //onclick event, 'list' fadein
          obj.find('.list').fadeIn(400);

          jQuery(document).keyup(function(event) { //keypress event, fadeout on 'escape'
            if(event.keyCode == 27) {
            obj.find('.list').fadeOut(400);
            }
          });

          obj.find('.list').hover(function(){ },
            function(){
              jQuery(this).fadeOut(400);
            });
          });

          obj.find('.list li').click(function() { //onclick event, change field value with selected 'list' item and fadeout 'list'
          obj.find('.field')
            .val(jQuery(this).html())
            .css({
              'background':'#fff',
              'color':'#333'
            });
          obj.find('.list').fadeOut(400);
          });
        });
      };
    })(jQuery);

    jQuery(function(){
      jQuery('.size').styleddropdown();
    });

HTML/php in my page.php file

  <div id="cat-list" class="size">
                    <input type="text" name="test" value="Categories" class="field"   readonly="readonly" />
                        <ul class="list">
                              <?php 
                            $args = array(
                                'orderby' => 'name',
                                'order' => 'ASC'
                            );
                            $categories=get_categories($args);                               
                                foreach ($categories as $category) {
                                    echo '<li>Category:<a href="'.get_category_link( $category->term_id ).'" title="' . sprintf( __(
                                    "View all posts in %s" ), $category->name ) . '" >' . $category->name.'</a> </li>';                                                                    
                                }                        
                            ?>                                  
                        </ul>
                </div>

              <br />

              <div id="tag-list" class="size">
                  <input type="text" name="test-1" value="Tags" class="field" readonly="readonly" />
                      <ul class="list">
                          <?php
                          $tags=get_tags("hide_empty=false&get=all");
                              $html = '<li>';
                              foreach ($tags as $tag) { 
                                  $tag_link = get_tag_link($tag->term_id);
                              }
                          $html .= "Tag: <a href='{$tag_link}' title='{$tag->name} Tag' class='{$tag->slug}'>";
                          $html .= "{$tag->name}</a> </li>";    
                          echo $html      
                          ?>
                      </ul>
              </div>