How can I make this small "for loop" better ?

How can I make this small "for loop" better ?

Hello, I'm about to deploy a website but I'm stuck in this last thing I hope I could get help!

So, I'm trying to make this for loop better.. and by better I mean I want to be able to call the function from outside the for loop. But since I have 6 buttons I need the i++ to get a different index for each button so I don't know what to do. I just need to be able to call the function called "my_function" else where but I can't, the only way I can make my for loop and function work is as the following.


  1. for (var i = 0; i < 6; i++) {
  2.     var button = $('.btn');
  3.     button[i].onclick = function my_function(i, e){

  4. // everything the function has.... which works perfect this way.
  5.     
  6.         e.preventDefault();
  7.     }.bind(null, i);
  8. }


I also want to get rid of that bind, make some vanilla js if possible. But the most important is just be able to call that function elsewhere.

Thanks a lot !!