Change the color of one of multiple boxes

Change the color of one of multiple boxes

Kindly explain how do I make a selection of one box at a time to change its color using JQuery. I believe an if and else statement is needed, but cannot figure it out.

HTML
<div class="box"><p>$10</p></div>
<div class="box"><p>$20</p></div>
<div class="box"><p>$30</p></div>
<div class="box"><p>$40</p></div>

CSS
.box {
width: 100px;
height:100px;
border: 2px solid blue;
}

JQUERY
$(document).ready(function(){
    $(".box").on({
        
        click: function(){
            $(this).css("background-color", "yellow");
click:true;
        }  
    });
});