JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="js/script.js"></script>

<div class="edit-container">
      
          
        <div class="edit-container">
        <input type="checkbox" id="a1" />
        <input type="checkbox" id="a2" />
        </div>
    
    </div>

CSS

.edit-container {width:100px; height:100px; background:green;}
.example {background:blue; width:200px; height:200px;}

JavaScript

$('.edit-container input[type="checkbox"]').change(function() {
    var examplediv= document.getElementById("example")
    var container=$(this).parent('.edit-container').parent('.edit-container');
    
    if(container.find('#a1:checked,#a2:checked').length==2)
       
        examplediv.css('background','red');
    else
          examplediv.css('background','');
})