How to toggle multiple divs using jQuery

I have several divs which should be shown / hidden when the corresponding button is clicked. In the initial state all buttons and all divs are visible. When the first button is clicked, only the corresponding div should be visible. When the second button is clicked, the corresponding div should be visible as well etc. The click on a button should toggle the state of the button and the corresponding div.

I'm not sure if this can be realized without placing a cookie or local storage token. So far I've created the following code, which only allows me to deactivate the divs with one first click.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(function() {
    $('.button').click(function(){
        $(this).toggleClass('inactive');
        $('#mydiv'+$(this).attr('target')).toggle();
    });
});

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <button class="button" target="1">Button 1</button>
  <button class="button" target="2">Button 2</button>
  <button class="button" target="3">Button 3</button>
</div>

<div id="mydiv1">
  <p>Div 1</p>
</div>

<div id="mydiv2">
  <p>Div 2</p>
</div>

<div id="mydiv3">
  <p>Div 3</p>
</div>

<!-- end snippet -->

If you want to toggle only the button/div that you just clicked, first you have to reset previous state of all elements to initial (remove class inactive and show all divs) and only than toggle state.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(function() {
    $('input[type="checkbox"]').change(function() {
      let checked = $('input[type="checkbox"]:checked');
      $('.inactive').removeClass('inactive');
      
      if (checked.length == 0) {
        $('.subdiv').show();
        
        return;
      }
      
      $('input[type="checkbox"]:not(:checked)').closest('label').addClass('inactive');

      $('.subdiv').hide();
      
      checked.each(function () {
        $('#mydiv' + $(this).val()).toggle();
      });
    });
});

<!-- language: lang-css -->

.inactive {
  color: red;
}

label input {
  display: none;
}

label {
  border: 1px solid gray;
  border-radius: 3px;
  padding: 2px 5px;
}

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <label><input type="checkbox" value="1"/>Button 1</label>
  <label><input type="checkbox" value="2"/>Button 2</label>
  <label><input type="checkbox" value="3"/>Button 3</label>
</div>

<div id="mydiv1" class="subdiv">
  <p>Div 1</p>
</div>

<div id="mydiv2" class="subdiv">
  <p>Div 2</p>
</div>

<div id="mydiv3" class="subdiv">
  <p>Div 3</p>
</div>

<!-- end snippet -->

You'd have to initially hide the divs and show the correct one when the right button is clicked.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(function() {
  $('.button').click(function() {
    $(this).toggleClass('active');
    $('#mydiv' + $(this).attr('target')).toggle();
  });
});

<!-- language: lang-css -->

/*
  Hide all divs that have an id starting with "mydiv"
*/

div[id^="mydiv"] {
  display: none;
}

.active {
  background-color: green;
  color: white;
}

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <button class="button" target="1">Button 1</button>
  <button class="button" target="2">Button 2</button>
  <button class="button" target="3">Button 3</button>
</div>

<div id="mydiv1">
  <p>Div 1</p>
</div>

<div id="mydiv2">
  <p>Div 2</p>
</div>

<div id="mydiv3">
  <p>Div 3</p>
</div>

<!-- end snippet -->

Have you to use a toggle or you can also solve it with a walk around?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(function() {
  $('.button').click(function() {
  $('.inactive').removeClass('inactive');
    $(this).toggleClass('active');
    $('.subdiv').show();
 
    $('.mydiv' + $(this).attr('target')).toggle();
  });
});

<!-- language: lang-css -->

/*
  Hide all divs that have an id starting with "mydiv"
*/

.active {
  background-color: green;
  color: white;
}

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <button class="button" target="1">Button 1</button>
  <button class="button" target="2">Button 2</button>
  <button class="button" target="3">Button 3</button>
</div>

<div class="mydiv1" hidden>
  <p>Div 1</p>
</div>

<div class="mydiv2" hidden>
  <p>Div 2</p>
</div>

<div class="mydiv3" hidden>
  <p>Div 3</p>
</div>

<!-- end snippet -->