Disable Boostrap Toggle Collapse For One Class And Enable It For Another

I have a boostrap collapse button that looks like this:

Solution 1:

So here is an example where you use the same id :

ABCD1234

on both elements but on the like button you apply it as a data attribute. When the button is clicked, you retrieve the id via the data attribute and then use it as a selector to update the like count on the appropriate matching collapsed content based on that id.

HTML

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ABCD1234" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="ABCD1234">
  <div class="well">
    <span>100</span> likes
  </div>
</div>

<br>
<button type="button" class="like" data-id="ABCD1234">Like <span>ABCD1234</span></button>

JS

$('.like').click(function(){
  var thisID = '#' + $(this).data('id');
  var $count = $('span', thisID);
  var number = parseInt($count.text());
  $count.text(number+1);
});

https://codepen.io/partypete25/pen/XgqBZX