jquery expand/collapse not working right

I just joined forum moments ago when I got real frustrated. I've been trying to work out a problem I found but haven't been able to solve myself.

So i'm building expand/collapse style menu where I have two items (two titles). When I click one of the titles, the item and its content is being expanded. When I click it again, it gets collapsed. It's just the way I want it to work.

The problem is that 'master' button which works as "Show all" or "Hide all". It isn't working like I want it to work. So when I click it once, all items are displayed and when I click it again all items are being hidden.

The problem is when I click one of the items open and THEN click "Show all" button, then that already opened element is being hid and element being before hidden is now being shown. How to proceed from here?

My code is here:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <title>Test</title>

    <!-- BOOTSTRAP CORE STYLE  -->
    <link href="assets/css/bootstrap.css" rel="stylesheet" />
    
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 
</head>

<body>

<button type="button" class="btn btn-primary">Show all</button>

<br>


<script>
$(document).ready(function(){
    $(".btn-primary").click(function(){
        $(".panel-collapse").collapse('toggle');
		
		var $this = $(this);
		$this.toggleClass('.btn-primary');
		if($this.hasClass('.btn-primary')){
		 $this.text('Hide all');
		} else {
		 $this.text('Show all');
		 }
    });
});
</script>

<br>

	
<div class="container">
  <div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" href="#collapse1">First collapse</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">First content</div>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" href="#collapse2">Second collapse</a>
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">Second content</div>
      </div>
    </div>
  </div>
</div>


<!--CORE SCRIPTS PLUGIN-->
<script src="assets/js/jquery-1.11.1.min.js"></script>
<!--BOOTSTRAP SCRIPTS PLUGIN-->
<script src="assets/js/bootstrap.js"></script>
	
	
</body>
</html>

Please note: There are few scripts that have local paths because I couldn't get global links (hyperlinks) to work here... don't really know why.

I know everything here is pretty messed up, i'm not a native English speaker but I hope you understand what I'm struggling with.

Thanks in advance. Any help is appreciated! :)

Solution

try next code :

$(document).ready(function(){
  let $button =$(".btn-primary");
   $button.click(function(){
        $(".panel-collapse").toggle()

        var $this = $(this);
        $this.toggleClass('.btn-primary');
        if(!$this.hasClass('.btn-primary')){
         $this.text('Hide all');
        } else {
         $this.text('Show all');
         }
    });
});

But I reccomend use custom class or id for identify buttons or others elements, because page can has many elements with similar bootstraps classes.For toogle text in button you need use variable.