JSFiddle - React, Tailwind, and code Playground

by Peter

HTML

<ul>
  <li data-id='1' data-checked='false' onclick='toggle_task(this);'>
    <i class='fs fa-check'></i>
    <span>Task A</span>
  </li>
  <li data-id='2' data-checked='false' onclick='toggle_task(this);'>
    <i class='fs fa-check'></i>
    <span>Task B</span>
  </li>
</ul>
<button onclick='show_checked();'>Done</button>

CSS

/* These need to be background-color, not color */

ul li[data-checked='true'] i:first-child {
  background-color: #000000;
}
ul li[data-checked='false'] i:first-child {
  background-color: #eeeeee;
}

/* Also need to add these styles to actually see the empty elements */

.fa-check {
    display: inline-block;
    height: 0.5em;
    width: 0.5em;
}

JavaScript

//Updated to use jQuery attr method

function toggle_task(sender) {
      if ($(sender).attr('data-checked') === 'true') {
        $(sender).attr('data-checked','false');
      } else {
        $(sender).attr('data-checked','true');
      }
    }

    function show_checked() {
      $('li').each(function() {
        var text = $(this).attr('id') + ': ' + $(this).attr('data-checked');
        alert($(this).attr('data-checked')); //Consider using console.log rather than alert here
      }); //Fixed your jQuery selector - required quotes for li element - is not a JavaScript variable
    }