Обновление массива с помощью .innerHTML, проблема при удалении/добавлении

Попытка заставить мой массив динамически обновляться во внешнем интерфейсе, когда пользователь либо добавляет/удаляет элемент.

HTML/PHP для интерфейса ниже:

<div class = "row">
    <div class = "col-12">

        <div class = "custom--css_pills">
            <span class = "tag filtering">Edit Products</span>
            <span id = "pills--container"></span>
        </div>

        <?php 

            $items = get_posts( array (  
                'post_type'         =>  array('products'),
                'posts_per_page' => -1  
            )); 
            echo '<div class = "enquire--surround_div">';
            foreach($items as $item) {
                echo '<input class = "enquiry--add_chk" type = "checkbox" value = "'.$item->post_title.'" id = "'.$item->post_title.'" />  
                <label for = "'.$item->post_title.'">'.$item->post_title.'</label>';  
            }
            echo '</div>';

        ?>

    </div>
</div>

Пока что я установил свой массив

var pills = ["test","test2"];

Затем настройте функцию, которая перебирает этот массив и выводит div с элементом массива и значком закрытия.

function looparray(){

var str = '';

pills.forEach(function(pill) {
        str += '<div class = "tag">'
        str += '<span>' + pill + '</span>';
        str += '<span class = "tag-exit"></span>';
        str += '</div>';
}); 

// Echo
    document.getElementById("pills--container").innerHTML = str;
}

затем вызовите эту функцию при загрузке

looparray();

Затем у меня есть щелчок для переключателей (передний конец). Что добавит в массив или удалит в зависимости от того, установлен ли флажок

$('.enquiry--add_chk').click(function(){

    $valuetoaddcolour = $(this).next();
    $valuetoaddcolour.toggleClass('enquiry--tabs_colour')

    $valuetoadd = $(this).next().text();

    if ( $(this).is(':checked')) {
        console.info('notfilled');
        pills.push($valuetoadd);
        console.info(pills);
    }
    else{
        pills.splice( $.inArray($valuetoadd, pills), 1 );
        console.info(pills);   
    }

    looparray();

});

А затем закрыть, чтобы удалить выбранное из массива.

//On close..
$('.tag-exit').click(function() {

    $valuetoremove = $(this).parent(); // Get parent to hide (surround div)
    $valuetoremovetext = $(this).parent().text(); // Get text to remove from array

    // remove from array
    pills.splice( $.inArray($valuetoremovetext, pills), 1 );
    $valuetoremove.hide(); // Hide the pill

    looparray();

});

теперь проблема в том, что когда я сначала выбираю удаление, все будет работать нормально. Если я затем добавлю элемент, а затем попытаюсь удалить через выход .tag, он не запустит функцию. Я сузил его до looparray(); вызывает проблему, но не может видеть, в чем проблема. Все, что я могу думать, это стирание данных и повторное добавление, что может вызвать проблему с предопределенными функциями?

Я собрал небольшую кодовую ручку, чтобы дать лучшее понимание. https://codepen.io/anon/pen/QoQrZw