Displaying a pattern of colors with setTimeout

I'm trying to build a simon says game as a leaing project (I've coding for just 3-4 months) and I can't seem to change the class of the items so I display the colors that I generate. I can guess it's because setTimeout inside of the for loops just activate the first and the second items in the array at the same moment and that's why it just don't work. So it would be really helpful if someone tell me if I'm doing the wrong thing or mby there is a better way to do it. I would really appreciate it. Fiddle

https://jsfiddle.net/kgkr8s71/2/

JAVASCRIPT

function displayButton(colors, sec) {
    console.log("displayButton fun");
    $colorClass.prop("disabled", true);
    for (var index = 0, len = colors.length; index < len; index++) {
        var color = colors[index];
        onfocus = setTimeout(function () {
            $("#" + color).toggleClass("active");
        }, sec * 1000);
        setTimeout(function() {
            $("#" + color).toggleClass("active");
            $colorClass.prop("disabled", false);
        }, sec * 1500);
    }
}

also it's okay to be really honest if you think it sucks too much.