Create a list from selected list items
<p>I have a fiddle here: <a href="http://jsfiddle.net/radi8/LxwLf/" rel="nofollow">my fiddle</a>. What I am trying to do is create a list of items from a separate group of lists. I cannot seem to get a grasp on what I am doing wrong, but here is whats happening:</p>

<ol>
<li>I have a group of lists based on tabular data</li>
<li>Each list has the name of the column and a selection checkbox</li>
<li>If I select an item, it needs to be added to the selected columns area (vertical list)</li>
<li>There are 14 unique tabular items with checkboxes</li>
<li><em><strong></em>(PROBLEM -->)</strong> When I select an item, it gets added 14 times in the selected columns section</li>
</ol>

<p>code </p>

<p>(html):</p>

<p>I tried ti insert HTML but is not working right. Please look at the fiddle listed above.</p>

<p>(jquery):</p>

<pre><code>var dte = // drag table elements
{
init: function() {
    var chkbx = $('.group input[type="checkbox"]:checkbox');
    //var chkbx = $('#accordion');
    for (var i = 0, ii = chkbx.length; i &lt; ii; i++) {
        $(chkbx).bind("click", dte.adjustList);
    }
},

adjustList: function(event) {
    var list = [];
    var str = '';
    var eleval = event.currentTarget.value;
    var eleid = event.currentTarget.id;
    if (eleval == 1) {
        list.push(eleid);
        str = '&lt;li&gt;' + eleid + '&lt;/li&gt;';
    }
    $('#vertical ul').append(str);
/*
    //var ele = event.currentTarget.id;
    var allVals = [];
    var str = '';
    //var obj = $("#"+ele);
    var ele = $('#accordion');
    $(obj+': checked').each(function(){
        allVals.push($(this.val()));
        dte.list.push($(this.val()));
        str += '&lt;li&gt;'+$(this.val())+'&lt;/li&gt;';
    });
    $('#verticle').text(str);
    alert('List: ' + toString(list));
    */
}
};
dte.init();
</code></pre>
