How to create a dynamic drop?

Here is my HTML code.

<dl id="sample" class="dropdown">
<dt><a href="#"></a></dt>
<dd>
    <ul>
        <li><a href="#">News</a></li>
        <li><a href="#">Jobs</a></li>
        <li><a href="#">Community</a></li>
        <li><a href="#">Events</a></li>
        <li><a href="#">Advisory</a></li>
        <li><a href="#">People</a></li>
        <li><a href="#">Universities</a></li>
        <li><a href="#">HR Intellegence</a></li>
        <li><a href="#">Companies</a></li>
        <li><a href="#">Inbox</a></li>
        <li><a href="#">Notifications</a></li>
    </ul>
</dd>

      

        
        
        
      

    

And this is js

$(document).ready(function() {
 $(".dropdown img.flag").addClass("flagvisibility");

 $(".dropdown dt a").click(function() {
   $(".dropdown dd ul").toggle();
 });

 $(".dropdown dd ul li a").click(function() {
   var text = $(this).html();
   $(".dropdown dt a span").html(text);
   $(".dropdown dd ul").hide();
 });

 function getSelectedValue(id) {
   return $("#" + id).find("dt a span.value").html();
 }

 $(document).bind('click', function(e) {
    var $clicked = $(e.target);
    if (! $clicked.parents().hasClass("dropdown"))
    $(".dropdown dd ul").hide();
  });

  $("#flagSwitcher").click(function() {
     $(".dropdown img.flag").toggleClass("flagvisibility");
  });
});

      

        
        
        
      

    

This is the code for the dropdown that is clicked to fill. I want to repeat it 100 times in my webpage and I don't want to copy the code and change the class name or id for every entry. I remember there is a function like .this' for this, but I don't know how to use it. Also I have some dynamic posts that contain this list so its JS cannot be repeated in every new post.

Please suggest changes to this code that will allow me to use the ".dropdown" class with every post without repeating the JS code, and it only opens the dropdown that opens to open.