Question

Should work same as it’s working independently.

This

(function($) { 
     $(document).ready(function(){
          $('#number1').hide();
        $('.button1').click(function(){
              $('.table1').slideToggle();
        $(this).toggleClass("minus_icon"); 
                return false;
   });
});

})(jQuery);

and this

(function($) { 
     $(document).ready(function(){
          $('#number2').hide();
        $('.button2').click(function(){
              $('.table2').slideToggle();
        $(this).toggleClass("minus_icon"); 
                return false;
   });
});

})(jQuery);

both will be used on same page.

Thanks

Edit: Added after @Felix comment

@Felix – Do you mean like this?

(function($) { 
     $(document).ready(function(){
          $('#number2, #number1').hide();
        $('.button2').click(function(){
              $('.table2').slideToggle();
        $(this).toggleClass("minus_icon"); 
                return false;
   });
});
        $('.button1').click(function(){
              $('.table1').slideToggle();
        $(this).toggleClass("minus_icon");
                return false;
   });
})(jQuery);

Answer 1

A sample HTML

<button id="button1" class="btn" div="table1">Table 1</button>
<button id="button2" class="btn" div="table2">Table 2</button>
<div class="myDiv" id="div1"><table><tr><td>Table1</td></tr></table></div>
<div class="myDiv" id="div2"><table><tr><td>Table2</td></tr></table></div>

CSS

  .myDiv { display:none; }

Jquery

 $(document).ready(function(){

    $('.btn').click(function(){
        //identify same class to all your div for example in this case I will define all tables as myDiv
        // doing this will not fix the effect to just two tables
        $(".myDiv").slideUp(); //Hide all divs first

        $('#'+$(this).attr("div")).slideToggle(); //show the required
        $(this).toggleClass("minus_icon");
        return false;
    });
});