I'm having issues with adding and removing items from my list on click. The removal function works only once. 

HTML

```
<h1 id="show-list></h1>
<ul id="my-list>
    <li data-itemname="C1">C1</li>
    <li data-itemname="B23">B23</li>
    <li data-itemname="D52">D54</li>
   ...

```

JS

```
$('#my-list').each(function() {

var $widget = $(this),
    $itemname = $(this).attr('data-itemname'),
    ...

$widget.on('click', function() {

  $currentlist = document.getElementById('show-list').innerHTML;
  // create current list array
  var str = $currentlist; // C1, B23, D54, etc
  var array = str.split(',');
  // convert item number to string
  var itemtocheck = $itemname.toString(); // works OK
  // check if value in array
  var result = $.inArray(itemtocheck, array); // so far so good

  if (result == 0) {
    selecteditems = $currentlist.replace(itemtoremove+',', ''); 
    $('#show-list').html(selecteditems); // Works only once
    return false;
  } else {
    $('#show-list').append($itemname+','); // will add OK
    return false;
  }
});

...

```

Also I feel that this function can be simplified?