jQuery click open one dropdown

Question

In a site I have several 'dropdown' which become visible when you press a plus sign. I did this with jQuery (see code below), but when pressing the button every dorpdown opens. How can I only open the dropdown where the button is pressed (Without writing this code for every button over again)?

 $('main .menu').click(function() {

      if($(this).hasClass('open')) {
            $(this).removeClass('open');
           $('main .menu').html('+');
           $('main .info').slideUp();

       }
       else {
            $(this).addClass('open');
            $('main .menu').html('-');
            $('main .info').slideDown();

       } 

 });

html:

<div id="first">
          <img src="images/flexit.jpg" alt="">
          <h2>Flexit</h2>
          <a href="#" class="menu">&#43;</a>
          <div class="info">
               <table>
                    <tr>
                         <td>Name:</td>
                         <td>Flexit</td>
                    </tr>
                    <tr>
                         <td>Dimensions:</td>
                         <td>2000 x 1600 x 1900 mm</td>
                    </tr>
                    <tr>
                         <td>Material(s):</td>
                         <td>powdercoated steal, redwood</td>
                    </tr>
                    <tr>
                         <td>Weight:</td>
                         <td>43 kg</td>
                    </tr>
                    <tr>
                         <td>Current location:</td>
                         <td>Buzzkruit exhibition, Designcenter Winkelhaak Antwerp</td>
                    </tr>

               </table>          
          </div>

Answer 1

You need to keep the plus before the menu:

<a href="#" class="menu-trigger">+</a>
<ul class="menu">
  <!-- Menu -->
</ul>
<a href="#" class="menu-trigger">+</a>
<ul class="menu">
  <!-- Menu -->
</ul>

And in the jQuery, you need to give only for the plus, you can also make the plus as minus:

$(".menu-trigger").click(function () {
  $(this).next(".menu").toggleClass("open"); // Selects only the next one!
});

Check out the snippet here:

 $(function () { $(".menu-trigger").click(function () { $(this).next(".menu").toggleClass("open"); // Selects only the next one! $(this).html($(this).next(".menu").hasClass("open") ? '-' : '+'); return false; }); }); 

 .menu-trigger {display: block; width: 3em; text-decoration: none;} .menu {display: none;} .menu.open {display: block;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <a href="#" class="menu-trigger">+</a> <ul class="menu"> <li>Menu 1</li> <li>Menu 1</li> <li>Menu 1</li> </ul> <a href="#" class="menu-trigger">+</a> <ul class="menu"> <li>Menu 2</li> <li>Menu 2</li> <li>Menu 2</li> </ul>