Поменять цвет фона одного из боксов

Вопрос-ответ JavaScript
1

Как сделать, чтобы при кликании на box1 менялся цвет фона sun box1, a при кликании на box2 менялся цвет фона sun box2. На данный момент меняется цвет фона бокса 1 и 2, хотя кликаешь, только на один из боксов.

<style>
    .container {
      display: flex;           
              }
    .sun{
        margin-top: -6rem;
        margin-left: auto;
        margin-right: auto;
        width: 10rem;
        height: 14rem;
        background-color: orange;
    }
    .fon{
    background-color:green;
    width: 9rem;
    height: 9rem;
    }
    .d19{
    background-color:blue;
    width: 10rem;
    height: 11rem;
    }
    h1{padding-top:5rem;
    }
    </style>
<script src="jquery-3.4.1.js"></script>	
</head>
<body >
<div class='container'>
<div class='sun'>
<div class="d19" >
<div class='fon'>
<h1>1 box</h1>
</div>
</div>
</div>
<div class='sun'>
<div class="d19" >
<div class='fon'>
<h1>2 box</h1>
</div>
</div>
</div>
</div>
<script>
$( document ).ready(function(){
$('.fon').mouseup(function() {
$('.sun').css({'background-color':'yellow'});
    });
});
</script>
2

Проблема в том, что $('.sun') вынимает оба блока (потому что у них обоих есть класс sun). Решить это можно либо добавлением уникального класса к обоим .sun и .fon (.sun.first .sun.second) и отдельными кликами на каждый из них:

$('.fon.first').click(function() {
    $('.sun.first').css({'background-color':'yellow'});
});

либо использованием функции .closest

$(this).closest('.sun').css({'background-color':'yellow'});