How to create a loop that assigns variables dynamically when button clicked

I am trying to assign variables based on buttons clicked.
First I did like this:

$("#dot"+1).click(function(){
        logdot1=true;
});
$("#dot"+2).click(function(){
        logdot2=true;
});
$("#dot"+3).click(function(){
        logdot3=true;
});
....and so on up to 36 times

I want to minimize this code through loop.How do I do that?

I tried doing it like this:

var logdot;
$("#dot"+i).click(function(){
        this['logdot'+i]=true;
});

But this stops the whole script from working.

Your this is likely not what you think it is.

Give each dot a class of dotClass.

Have a const dotsClicked = [];

and use delegation (assuming the dots are siblings in the same container)

There is no need for loops in neither jQuery nor vanilla JS to do this.

You can delegate to a common container in vanilla JS

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// test data
$('#dots').html(Array.from({ length: 36 })
  .map((_, i) => `<div class="dot"></div>`).join('') // vanilla JS map
);

let dotsClicked = $('.dot').map(function() {
  return this.matches('.dotClicked')
}).get(); // jQuery map using vanilla JS matches

$('.dot').on('click', function() {
  $(this).toggleClass('dotClicked');
  dotsClicked[$(this).index()] = $(this).is('.dotClicked');
  console.log(dotsClicked);
})

<!-- language: lang-css -->

#dots {
  display: flex;
  gap: 10px;
  flex-direction: row;
  flex-wrap: wrap;
  width: 130px;
  border: 1px solid black;
  padding: 10px;
}

.dot {
  font-size: 35px;
}

.dot:hover {
  color: red;
}

.dot::before {
  content: "•"
}

.dotClicked {
  color: red;
}

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<div id="dots">
</div>

<!-- end snippet -->