show specific div on click

Question

I have this code what it does that it shows some circles on click, but when i click on one of them all of the circles appear, i don't want that, what i want is with each click only the circles under the word "click" to appear not all of them, how can i do that? here is my code:

$(function() {
    $('.clickme').click(function() {
        $('.circle').toggle()
    });
});

.circle{
width: 50px;
height: 50px;
border-radius: 50px;
background-color: blue;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  transform: scale(0);
}


  .circle{
    animation: popin .25s forwards;
    }
    
    .circle:nth-of-type(1){
   
      top: 22px;
      left: 80px;
      }
    .circle:nth-of-type(2){
      top: 22px;
      left: 48px;
      }
    .circle:nth-of-type(3){
      top: 22px;
      left: 16px;
      }

@keyframes popin {
  80% {
    transform: scale(1.15);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

<script
  src="https://code.jquery.com/jquery-1.9.1.min.js"
  integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ="
  crossorigin="anonymous"></script>

<ul>
  <li class="circles">
  <button class="circle"></button>
  <button class="circle"></button>
  <button class="circle"></button>
  <div class="clickme">click</div>
   </li>
 </ul>
 
 <ul>
  <li class="circles">
  <button class="circle"></button>
  <button class="circle"></button>
  <button class="circle"></button>
  <div class="clickme">click</div>
   </li>
 </ul>
 
 <ul>
  <li class="circles">
  <button class="circle"></button>
  <button class="circle"></button>
  <button class="circle"></button>
  <div class="clickme">click</div>
   </li>
 </ul>

Answer 1

.circle will target all .circles. To target the .circles before the .clickme element you click on, you can use $.siblings() since they're adjacent to .clickme

$(function() {
    $clickme = $('.clickme');
    $(document).on('click','.clickme',function(e) {
      $(this).closest('ul').siblings('ul').find('.circle').hide();
      $(this).siblings('.circle').toggle();
      e.stopPropagation();
    }).on('click',function() {
      $('.circle').hide();
    });
});

.circles { position: relative; }
.circle{
width: 50px;
height: 50px;
border-radius: 50px;
background-color: blue;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  transform: scale(0);
}


  .circle{
    animation: popin .25s forwards;
    }
    
    .circle:nth-of-type(1){
   
      top: 22px;
      left: 80px;
      }
    .circle:nth-of-type(2){
      top: 22px;
      left: 48px;
      }
    .circle:nth-of-type(3){
      top: 22px;
      left: 16px;
      }

@keyframes popin {
  80% {
    transform: scale(1.15);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

<script
  src="https://code.jquery.com/jquery-1.9.1.min.js"
  integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ="
  crossorigin="anonymous"></script>
  
<ul>
  <li class="circles">
  <button class="circle"></button>
  <button class="circle"></button>
  <button class="circle"></button>
  <div class="clickme">click</div>
   </li>
 </ul>
 
 <ul>
  <li class="circles">
  <button class="circle"></button>
  <button class="circle"></button>
  <button class="circle"></button>
  <div class="clickme">click</div>
   </li>
 </ul>
 
 <ul>
  <li class="circles">
  <button class="circle"></button>
  <button class="circle"></button>
  <button class="circle"></button>
  <div class="clickme">click</div>
   </li>
 </ul>