Variable in JavaScript giving the same value
<p>in this code I am trying to display cats from cats list when they get selected then increase the score of each one of them when they get selected
The problem here is the count variable is connected between all cats. So when I click on any photo the count variable it self gets increased. How can I assign different value of the variable count to each cat? I hope it is clear enough</p>

<pre><code>// displaying the cat when clicked 
for (var i = 0; i &lt; catsColumn.length; i++) {
(function () {
    var cattt = cats[i];
     catsColumn[i].addEventListener('click', function () {
    var catDisplay = document.createElement('div');
    var catScore = document.innerHTML = "&lt;p id=" +  cattt + "&gt;0&lt;/p&gt;&lt;img class='catDisPic' src='"+ cattt +".jpg'&gt;";
    catDisplay.innerHTML = catScore;
    catsDisplay.appendChild(catDisplay);
    // selecting the cats in the display area and adding event listener

        var catPicDis = catsDisplay.getElementsByClassName('catDisPic');
    for (var i = 0; i &lt; catPicDis.length; i++) {
        (function () {
            var count = 0;
        catPicDis[i].addEventListener('click', function(){

            this.previousSibling.textContent = ++count;
        })

    }())
    } 
})
}())
</code></pre>

<p>}</p>