JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer">
    <div id="B" class="box">B</div>
    <div id="A" class="box">A</div>
</div>

CSS

#outer {
  position: relative;
}

.box {
  position: absolute;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border-radius: 2px;
  border: 3px solid #000;
  color: #fff;
}

#A {
  border-color: #385D8A;
  background: #4F81BD;
}

#B {
  border-color: #8C3836;
  background: #C0504D;
  top: 75px;
  left: 75px;
}

JavaScript

var $A = $('#A'), $B = $('#B');

$B.on('click', function () {
  console.log('B clicked');   
});


$('#outer').on('click', function (evt) {
    if (Math.random() < 0.1) {
        $B.trigger(evt);
    }
});