JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="hover-content">
<button id="btnOne" class="button-ex">demo1</button>
<button id="btnTwo" class="button-ex">demo2</button>
</div>
<div class="hover-content">
<button id="btnOne" class="button-ex">demo1</button>
<button id="btnTwo" class="button-ex">demo2</button>
</div>
<div class="hover-content">
<button id="btnOne" class="button-ex">demo1</button>
<button id="btnTwo" class="button-ex">demo2</button>
</div>
<div class="hover-content">
<button id="btnOne" class="button-ex">demo1</button>
<button id="btnTwo" class="button-ex">demo2</button>
</div>
<div class="hover-content">
<button id="btnOne" class="button-ex">demo1</button>
<button id="btnTwo" class="button-ex">demo2</button>
</div>
<div class="hover-content">
<button id="btnOne" class="button-ex">demo1</button>
<button id="btnTwo" class="button-ex">demo2</button>
</div>
<div class="hover-content">
<button id="btnOne" class="button-ex">demo1</button>
<button id="btnTwo" class="button-ex">demo2</button>
</div>
<div class="hover-content">
<button id="btnOne" class="button-ex">demo1</button>
<button id="btnTwo" class="button-ex">demo2</button>
</div>
<div class="hover-content">
<button id="btnOne" class="button-ex">demo1</button>
<button id="btnTwo" class="button-ex">demo2</button>
</div>

CSS

body {
  background-color: #eef;
  padding: 5px;
}
.hover-content{
  background-color:#FF0000
}

JavaScript

$(".hover-content").click(function(e){
e.preventDefault();
console.log('hi')
e.stopPropagation();
$(".hover-content button").trigger("click");
});

$('.button-ex').click(function(e){
  e.preventDefault();
  e.stopPropagation();
   console.log('clicked button')
})