JSFiddle - React, Tailwind, and code Playground

HTML

<div class="module">
    <input type="checkbox" name="compare" id="compare1" />
    <label for="compare1">Compare</label>
    <a href="#" title="#" class="productName">PRODUCT NAME 1</a>
</div>

<div class="module">
    <input type="checkbox" name="compare" id="compare2" />
    <label for="compare2">Compare</label>
    <a href="#" title="#" class="productName">PRODUCT NAME 2</a>
</div>

<div class="module">
    <input type="checkbox" name="compare" id="compare3" />
    <label for="compare3">Compare</label>
    <a href="#" title="#" class="productName">PRODUCT NAME 3</a>
</div>

<ul class="toBeCompared"></ul>

JavaScript

$('input[type="checkbox"]').click(function(){
    var title = $(this).closest('.module').find('.productName').html();
    // If the checkbox is checked, add the item to the ul.
    if($(this).attr('checked')){
        var html = '<li title="' + title + '">' + title + '</li>';
        $('ul.toBeCompared').append(html);
    } else {     
        // if the checkbox is unchecked, remove the item from the ul.
        $('li[title="' + title + '"]').remove();
    }
});