title: 'display': 'block" div is appearing on all buttons(classes)
body: <p>I'm trying to set the display property of the div to block using jQuery when the button is clicked but since I have multiple buttons the div is appearing on each button.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;button class="btn btn-dropdown"&gt;&lt;i class="fa fa-caret-down" aria-
  hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
  
  &lt;div class="dropdown-opt"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$('.btn-dropdown').on('click', function() {
    $('.dropdown-opt').css({'display': 'block'})
  });
  }
  </code></pre>
  
  <p>All I want is that the div appears only on the button which gets clicked and not on all the buttons. I think the concept of 'this' will help but I'm not sure how to implement it. </p>