appendChild with onclick function that passes through the div's value

Good day everyone,

I've been grinding the whole day yesterday at this function however I've been running in circles and would appreciate any input or suggestions.

Currently I want to create a onclick function on my div (match-tab) that when it gets clicked it will send it's value to my javascript which will let the function know which game's data it should render.

at the moment my function looks like this:

    for (x in data){

        var recent_matches_row_one = document.getElementById('recent-matches-row-one');
        var recent_matches_row_two = document.getElementById('recent-matches-row-two');

        var col = document.createElement("div");
        col.className = "col no-padding";

        var matchTab = document.createElement("div");
        matchTab.className = "match-tab";
        matchTab.id = "match-tab";
        matchTab.value = x;
        matchTab.innerHTML = ++x;
        matchTab.onclick = foo(this.value);

        if (x < 15){
            recent_matches_row_one.appendChild(col);
            col.appendChild(matchTab);
        } else if (x > 15) {
            recent_matches_row_two.appendChild(col);
            col.appendChild(matchTab);
        }
    }

}


function foo(value){
    var v = value;
    console.log(v);
}

As you can see the recent matches functions renders the amount of match tabs according to the amount of match data available.

The front end looks like this and as you can see it is seen as undefined.

I would really like to write this whole application in vanilla JavaScript since I'm new to it and want to learn it before moving to other frameworks and libraries.

Thanks