change the background color of class

change the background color of class

How to make that when you click on class fon of box1, the background color of class sun of box1 must to changes, and when you click on class fon of box2, the background color of class sun of box 2 must to changes. At the moment, the background color of boxes 1 and 2 is changing, although  only click on one of the boxes.

  2.  <style>
  3. .container {
  4.   display: flex;           
  5.           }
  6. .sun{
  7.     margin-top: -6rem;
  8.     margin-left: auto;
  9.     margin-right: auto;
  10.     width: 10rem;
  11.     height: 14rem;
  12.     background-color: orange;
  13. }
  14. .fon{
  15. background-color:green;
  16. width: 9rem;
  17. height: 9rem;
  18. }
  19. .d19{
  20. background-color:blue;
  21. width: 10rem;
  22. height: 11rem;
  23. }
  24. h1{padding-top:5rem;
  25. }
  26. </style>
  27. <script src="jquery-3.4.1.js"></script>
  28. </head>
  29. <body >
  30. <div class='container'>
  31. <div class='sun'>
  32. <div class="d19" >
  33. <div class='fon'>
  34. <h1>1 box</h1>
  35. </div>
  36. </div>
  37. </div>
  38. <div class='sun'>
  39. <div class="d19" >
  40. <div class='fon'>
  41. <h1>2 box</h1>
  42. </div>
  43. </div>
  44. </div>
  45. </div>
  46. <script>
  47. $( document ).ready(function(){
  48. $('.fon').mouseup(function() {
  49. $('.sun').css({'background-color':'yellow'});
  50.     });
  51. });
  52. </script>
 








1 box

2 box