I am beginner so please don't make too much fun of me, but I am having issues trying to get separate buttons to react when clicked. The current code that I have written will dim the all of the buttons when I click on only one of them. The problem is that I have 4 buttons and I want them to all be independent, but I don't want to type the same code 4 times for each of them.

Here is my HTML:

  <div type="button" id="green" class="btn green">

  </div>

  <div type="button" id="red" class="btn red">

  </div>
</div>

<div class="row">

  <div type="button" id="yellow" class="btn yellow">

  </div>
  <div type="button" id="blue" class="btn blue">

  </div>

</div>

Here is my jQuery code:

let buttonDim = function(){
  $(".btn").on("click", function(){
    $(".btn").addClass("pressed");
    setTimeout(function(){
      $(".btn").removeClass("pressed");
    }, 100);
  });
}
buttonDim();

I am aware that I have probably written the code ridiculously longer than it needs to be, but I am still learning. Any help would be greatly appreciated, thank you.