JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>




<div class="border_div">
  <h2>
With eq(i)..<br>Not working
</h2>
  <button class="btn">
    Btn 1
  </button>

  <div class="container">
    Container 1
  </div>

  <br>
  <br>

  <button class="btn">
    Btn 2
  </button>

  <div class="container">
    Container 2
  </div>

</div>







<div class="border_div">
  <h2>
Without eq(i)<br>It only works with<br>a real number
</h2>
  <button class="btn_">
    Btn 1
  </button>

  <div class="container_">
    Container 1
  </div>

  <br>
  <br>

  <button class="btn_">
    Btn 2
  </button>

  <div class="container_">
    Container 2
  </div>

</div>

<br>
<br>
<br>

CSS

button {
  padding: 10px 10px 10px 10px;
  background-color: midnightblue;
  border: 0;
  border-radius: 10px;
  color: white;
  font-size: 22px;
  cursor: pointer;
}

.container,
.container_ {
  display: table;
  font-size: 20px;
  color: black;
  border: 1px solid black;
  padding: 10px 10px 10px 10px;
  margin-top: 10px;
}

.border_div {
  float: left;
  display: table;
  padding: 10px 30px 10px 30px;
  border-radius: 10px;
  border: 1px solid black;
  margin-right: 10px;
  margin-left: 10px;
  margin-top: 10px;
}

JavaScript

for (var i = 0; i < 5; i++) {

  $('.btn').eq(i).click(function() {
    $('.container').eq(i).toggle();
  });

}



// How can I auto detect the eq() index ?
// This is a working example with eq(0)
$('.btn_').eq(0).click(function() {
  $('.container_').eq(0).toggle();
});