JSFiddle - React, Tailwind, and code Playground

HTML

<p>Click Box 1 to see the result:</p>
    
      <div id = "box1">
        <p>Box 1</p>
        
      </div>

      <div id = "box2">
        <p>Box 2</p>
      </div>

CSS

#box1{background:#64B96B;width:200px;border:1px solid #000;padding:25px;color:#fff;line-height:30px;text-align: center;}
         #box2{background:#64B96B;width:200px;border:1px solid #000;padding:25px;color:#fff;line-height:30px;text-align: center;margin-top: 20px;}

JavaScript

$(document).ready(function() {
      
            $("#box1").click( function () {
               $("#box2").trigger('click');
            });

            $("#box2").click( function () {
               alert( "Box 2 has been clicked");
               $("#box2").css("background", "grey");
            });
        
         });