How can I toggle the hidden class on an inner div by clicking a button inside a card using jQuery?

How to create functionality in jQuery that will toggle hidden class on inner div by clicking on a button inside a card?

I tried to create a container div that have some cards in it.the problem is when i click the button
it only opens the panel but doesn't close the panel if i click it again.
however it being closed if i open a new panel(that is somthing i want to happen)

another thing is that hideAllPanels and showMoreInfo works when only one is active.

function handleMoreInfo() {
  // 1) Find the coin-card element 
  $(".coin-card").on("click",async function(e) {
    // a) stop bubbling
    e.stopImmediatePropagation();

    // b) Find coin id
    const coinID = ($(this).find('.coin-name').text()).toLowerCase();
    
    // c) Get more info about the coin
    const data = await fetchMoreInfo(coinID);

    // d) Optional: hide all panels
    // if(nodeList) hideAllPanels();

    // e) display the chosen more info panel
    if (data) showMoreInfo(data,$(this));
  });
}

const showMoreInfo = (data,thatCoin) => {
  // 1) Find all classes on more-info-panel and then find out if class hidden exists

  // 2) Toggle more-info-panel between displayed and hidden

  nodeList[0].forEach(div => {
    const coinNameFromArr = $(div).find('.coin-name').text();

    if (coinNameFromArr.toLowerCase() === data.id ) {
      console.log('Match');
      const panel = $(div).find('.more-info-panel').attr("class");
      const panelClassesArr = panel.split(' ');


      if(panelClassesArr.length === 1) $(div).find('.more-info-panel').addClass("hidden");
      if(panelClassesArr.length === 2) $(div).find('.more-info-panel').removeClass("hidden");
    }
  })

  // 3) Set new data inside panel
  thatCoin.find('.more-info-image').prop("src",data?.image?.large);
  thatCoin.find('.usd').text(`USD: $${data?.market_data?.current_price?.usd}`);
  thatCoin.find('.eur').text(`EUR: €${data?.market_data?.current_price?.eur}`);
  thatCoin.find('.ils').text(`ILS: ₪${data?.market_data?.current_price?.ils}`);
}

const hideAllPanels = () => {
  // 1) Loop over node list of the body-container to see if some panels are open
  console.log(nodeList);
  nodeList[0].forEach(div => {
    const panel = $(div).find('.more-info-panel').attr("class");
    const panelClassesArr = panel.split(' ');

    // 2) If element have only one class it means that panel is displayed add we need to hide it
    if(panelClassesArr.length === 1) $(div).find('.more-info-panel').addClass("hidden");
  });  
}

this is the html of a card example

  <div class="coin-card">
    <div class="headInfo">
      <p class="coin-symbol">btc</p>
      <div class="form-check form-switch"><input class="form-check-input" num1="0" type="checkbox"             role="switch"
          onclick="addCoinsToArray()"><label class="form-check-label" for="flexSwitchCheckChecked"></label></div>
    </div>
    <p class="coin-name">Bitcoin</p><button class="btn btn-info mybtn" onclick="handleMoreInfo()" data-toggle="collapse"
      data-target="info" num="0">More Info</button>
    <div class="more-info-panel hidden" symbol="bitcoin"><img class="more-info-image"
        src="./src/img/bitcoin-g80ff29158_640.jpg">
      <p class="info-title">Coin Prices:</p>
      <p class="usd">USD: $30</p>
      <p class="eur">EUR: €30</p>
      <p class="ils">ILS: ₪30</p>
    </div>
  </div>

I agree, your code is a bit overcomplicated. You are also mixing onclick and jQuery .on('click'), so you're basically adding a new on('click') handler to coin-card everytime you click on the button.

I'd approach it like this:

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

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

// you don't need an onclick on the button
$('.coin-card .btn-info').on('click', async function() {
// find the parent .coin-card of the button that was clicked
const $card = $(this).closest('.coin-card');
const $infoPanel = $card.find('.more-info-panel');
// const coinName = $card.find('.coin-name').text().toLowerCase();
// const data = await fetchMoreInfo(coinID);
// set data...
// version 1 allow multiple panels open
//$infoPanel.toggleClass('hidden');
// or version 2 behave like accordion. close all other panels
const isOpen = $infoPanel.hasClass('hidden');
$('.coin-card .more-info-panel').addClass('hidden');
if (isOpen) {
$card.find('.more-info-panel').removeClass('hidden');
}
});

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

.coin-card {
border: 1px solid;
margin: .5rem;
padding: 1rem;
float: left;
width: 20%;
}
p {
margin: 0;
}
.coin-card .more-info-panel.hidden {
display:none;
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="coin-card">
<div class="headInfo">
<p class="coin-symbol">btc</p>
<div class="form-check form-switch"><input class="form-check-input" num1="0" type="checkbox"             role="switch"
onclick="addCoinsToArray()"><label class="form-check-label" for="flexSwitchCheckChecked"></label></div>
</div>
<p class="coin-name">Bitcoin</p><button class="btn btn-info mybtn" data-toggle="collapse"
data-target="info" num="0">More Info</button>
<div class="more-info-panel hidden" symbol="bitcoin"><img class="more-info-image"
src="./src/img/bitcoin-g80ff29158_640.jpg">
<p class="info-title">Coin Prices:</p>
<p class="usd">USD: $30</p>
<p class="eur">EUR: €30</p>
<p class="ils">ILS: ₪30</p>
</div>
</div>
<div class="coin-card">
<div class="headInfo">
<p class="coin-symbol">btc</p>
<div class="form-check form-switch"><input class="form-check-input" num1="0" type="checkbox"             role="switch"
onclick="addCoinsToArray()"><label class="form-check-label" for="flexSwitchCheckChecked"></label></div>
</div>
<p class="coin-name">Bitcoin</p><button class="btn btn-info mybtn" data-toggle="collapse"
data-target="info" num="0">More Info</button>
<div class="more-info-panel hidden" symbol="bitcoin"><img class="more-info-image"
src="./src/img/bitcoin-g80ff29158_640.jpg">
<p class="info-title">Coin Prices:</p>
<p class="usd">USD: $30</p>
<p class="eur">EUR: €30</p>
<p class="ils">ILS: ₪30</p>
</div>
</div>
<div class="coin-card">
<div class="headInfo">
<p class="coin-symbol">btc</p>
<div class="form-check form-switch"><input class="form-check-input" num1="0" type="checkbox"             role="switch"
onclick="addCoinsToArray()"><label class="form-check-label" for="flexSwitchCheckChecked"></label></div>
</div>
<p class="coin-name">Bitcoin</p><button class="btn btn-info mybtn" data-toggle="collapse"
data-target="info" num="0">More Info</button>
<div class="more-info-panel hidden" symbol="bitcoin"><img class="more-info-image"
src="./src/img/bitcoin-g80ff29158_640.jpg">
<p class="info-title">Coin Prices:</p>
<p class="usd">USD: $30</p>
<p class="eur">EUR: €30</p>
<p class="ils">ILS: ₪30</p>
</div>
</div>

<!-- end snippet -->