javascript - for ループを使用して HTMLElement に addEventListener に渡された引数が正しくない

Question

jsFiddle へのリンク: http://jsfiddle.net/6Y8FU/

以下を使用して、このテーブル内のすべてのtr.tableWinkelwagen-productItemを照会しています。

var productItemAll = document.querySelectorAll(".tableWinkelwagen-productItem")

これは表です:

                <table class="tableWinkelwagen">
                    <tr>
                        <th>Product(en)</th>
                        <th>Prijs</th>
                        <th>Aantal</th>
                        <th>Totaal</th>
                        <th></th>
                    </tr>
                    <tr class="tableWinkelwagen-productItem" data-id="1">
                        <td>Treinreis Utrecht - Boedapest <br> <small>05/08/2014 - 05/08/2014</small></td>
                        <td>€&lt;span class="priceUnit">170</span>,-</td>
                        <td><div class="boxNumbers"><i class="glyphicon glyphicon-minus-sign boxNumbers-min"></i> <input type="text" class="boxNumbers-input priceAmount" placeholder=""> <i class="glyphicon glyphicon-plus-sign boxNumbers-plus"></i></div></td>
                        <td>€&lt;span class="priceTotal">340</span>,-</td>
                        <td><a href="" class="glyphicon glyphicon-trash"></a></td>
                    </tr>
                    <tr class="tableWinkelwagen-productItem" data-id="1">
                        <td>Treinreis Utrecht - Boedapest <br> <small>05/08/2014 - 05/08/2014</small></td>
                        <td>€&lt;span class="priceUnit">170</span>,-</td>
                        <td><div class="boxNumbers"><i class="glyphicon glyphicon-minus-sign boxNumbers-min"></i> <input type="text" class="boxNumbers-input priceAmount" placeholder=""> <i class="glyphicon glyphicon-plus-sign boxNumbers-plus"></i></div></td>
                        <td>€&lt;span class="priceTotal">340</span>,-</td>
                        <td><a href="" class="glyphicon glyphicon-trash"></a></td>
                    </tr>
                    <tr>
                        <td><strong>Totaal</strong></td>
                        <td></td>
                        <td></td>
                        <td>€&lt;span>340</span>,-</td>
                        <td></td>
                    </tr>
                </table>

もちろん、これにより、2 つの tr を持つ nodeList が得られます。

次に、次のコードを使用して、tr 内のi.boxNumbers-minのそれぞれに eventListener を追加します。

    function addEventListenerToMinPlus(){

        var x, y

        for(var i = 0; i < productItemAll.length; i++){

            x = productItemAll[i].querySelector(".boxNumbers-min")
            x.addEventListener("click", function(){updateProduct(i)})

            console.log(x)


        }

    }

コンソールは両方の tr を正常に出力しますが、関数 updateProduct(i) を実行すると、クリックで開始され、「0」と「1」ではなく値 2 の popop が表示されます。

    function updateProduct(jow){

        alert(jow)


    }

i.boxNumbers-minボタンをクリックすると、値が常に「0」または「1」ではなく「2」になるのはなぜですか?

jsFiddle へのリンク: http://jsfiddle.net/6Y8FU/