Why doesn’t my for loop wait for setTimeout in JS? [duplicate]

I wanted to make a simon game. This is the website if you want to have a look at https://ozankrds.github.io/simon-game/ . I want the colors that showed up so far to pop up followingly. This is the code I’ve written:

for (let i = 0; i < gamePattern.length; i++) {
        setTimeout(function () {
            $("#" + gamePattern[i]).fadeIn(100).fadeOut(100).fadeIn(100);
            
            // Adds the sound corresponding to the color
            playSound(gamePattern[i]);
        }, 500);
    }

But the different colors poped up simultaneously.

I asked chatgpt about how to do that and it told me to assign the time to be 500 * i. But I didn’t exactly understand why? Why doesn’t one sequence wait 500 ms and then iterate i?