Trying to setup binding to a callback with different values
<p>I am trying to build a jquery function that builds a series of buttons and binds them to the callback with different argument values.  The issue I am having is that the callback is always called with the argument value of the last buttons[] value "cancel" no matter which button is clicked. </p>

<pre><code>var buttons = ["OK|ok", "Cancel|cancel"];
buildButtons(buttons, function(response){
    alert(response);
});

function buildButtons(buttons){
    for (i = 0; i &lt; buttons.length; i++){
        var btnTitle = buttons[i].split("|")[0];
        var btnName = buttons[i].split("|")[1].toString();
        var btnElem = $('&lt;button/&gt;', {
            type: 'button',
            id: 'btn_' + btnName,
            html: btnTitle,
        })

        $(btnElem).on('click', function () {
            //..some other code
            fnResponse(btnName); //&lt;&lt;------- Issue Should return 'ok' or 'cancel'
        });
    }
}
</code></pre>

<p>The problem is that the callback is always called with the value [btnName] of the last element.. no matter which button is clicked.</p>
