JSFiddle - React, Tailwind, and code Playground

HTML

<table id="todo_tasks">
<thead>
  <tr>
    <th></th>
    <th>Task</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td><input type="checkbox" data-user="1" data-task-id="1"></td>
    <td>Task 1</td>
  </tr>
  <tr>
    <td><input type="checkbox" data-user="1" data-task-id="2"></td>
    <td>Task 2</td>
  </tr>
  <tr>
    <td><input type="checkbox" data-user="1" data-task-id="3"></td>
    <td>Task 3</td>
  </tr>
</tbody>
</table>

JavaScript

window.addEventListener('DOMContentLoaded', function(){
	const table = document.getElementById('todo_tasks');
  table.addEventListener('click', function(e){
  	if (e.target.nodeName !== 'INPUT' || e.target.getAttribute('type') !== 'checkbox'){
    	//Only interested in checkboxes, ignore the rest.
      return;
    }
    
    const username = e.target.dataset.user;
    const taskId = e.target.dataset.taskId;
    
    fetch('/echo/json', {
    	method: 'post',
      /** JSFiddle specific demo stuff */
    	body: 'json='+JSON.stringify({user: username, task: taskId, complete: true})
      /** end */
    }).then(function(response){
    		if (response.ok){
        	return response.json();
        } else {
        	throw new Error(response.statusText);
        }
    }).then(function(data){
    	if (data.complete){
      	e.target.disabled = true;
      }
    }, function(err){
    	alert('Failed to make request.');
    });
  });
});