How Do I Assign Blank Space In A Div And The Button Within With The Same Functionality?

So I am trying to solve this problem with a program I am writing, I have a div, with the class .main. It occupies a certain amount of space. Within it, there are two buttons. When

Solution 1:

If I got you correctly, following changes should be the answer:

$(document).on("click", ".button1, .main", function(e) {
    e.stopPropagation();

    $(".light1").toggle();

});

$(document).on("click", ".button2", function(e) {
    e.stopPropagation();

    $(".light2").toggle();

});

Read more about event.stopPropagation()

• https://api.jquery.com/event.stoppropagation/
• https://developer.mozilla.org/en/docs/Web/API/Event/stopPropagation

Solution 2:

Use stopPropagation to prevent the click event of the button1 propagating to the .main click event.

$(document).on("click", ".button1, .main", function(e)
                   {
                    e.stopPropagation()
                    $(".light1").toggle();
                    

                   });

    $(document).on("click", ".button2", function(e)
                   {
                    e.stopPropagation();
                    $(".light2").toggle();

                   });

.main
        {
        background-color: rgba(98,159,210, 0.3);
        border-radius: 1px;
        font-size: 14px;
        color: black;
        width: 400px;
        margin-left: auto;
        margin-right: auto;
        height: 50px;
        padding:3px;
        cursor: pointer;        
        }


        .button1
        {

        }

        .button2
        {

        }


        .light1
        {
            height: 100px;
            width: 100px;
            background-color: yellow;
        }

        .light2
        {
            height: 100px;
            width: 100px;
            background-color: red;   

        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <br><br>
    <div class="main">
         <button class="button1">button1</button>
         <button class="button2">button2</button>
    </div>
    <br>
    <br><br><br><br>
    <div class="light1"></div>
    <div class="light2"></div>

</div>