Prevent two divs from executing the same function jQuery

I have this code:

HTML

<div>
  <div class="change"></div>
  <div class="change"></div>
</div>

JQUERY

$('div').click(function(){
  $('.change').css('background','red');
});

I want to click the upper div and change the background of the upper div, but it change both. I know I can make classes and stuff, but what if I have 100 divs like that? I don’t want to create a class and a jquery statement for each one!


solution

Within the event listener, this refers to the clicked element, therefore you could use:

$('.change').click(function(){
  $(this).css('background','red');
});