I figured out how to handle this implementation myself 
There is a simple javascript to implement the click event listener function:
<script>
document.addEventListener("DOMContentLoaded", function() {
// Get the trigger divs
const triggerDiv1 = document.querySelector('.variants_card_top');
const triggerDiv2 = document.querySelector('.variants_card_middle');
const triggerDiv3 = document.querySelector('.variants_card_bottom');
// Function to trigger button click
function triggerButtonClick(dataOptionId) {
const button = document.querySelector(`[data-option-id="${dataOptionId}"]`);
if (button) {
button.click();
} else {
console.log(`Button with data-option-id="${dataOptionId}" not found`);
}
}
// Add click event listeners to the trigger divs
triggerDiv1.addEventListener('click', function() {
triggerButtonClick('02670c6c720ef68e2611ee2b079b7630');
});
triggerDiv2.addEventListener('click', function() {
triggerButtonClick('e382ab27ea28dcd155afeb58650b10cb');
});
triggerDiv3.addEventListener('click', function() {
triggerButtonClick('bcae688b85385576fbfcdb9e694f8029');
});
});
</script>
Trigger element is the div for the card (top, middle, bottom):
The click triggers automatically generated div for product variant button with data-option-id=“xxx” (I got it from inspector)
