JSFiddle - React, Tailwind, and code Playground

HTML

<li>
   <label>
     <input type="checkbox" name="filter1" id="filter1" value="apple">apple
   </label>
 </li>

CSS

.info {
  width: 50%;
  padding: 7px 0;
  margin: 30px auto;
  border-radius: 10px;
  background: lightpink;
  font: bold 15px Helvetica, Verdana, sans-serif;
  text-align: center;
  text-transform: uppercase;
  color: blue;
  text-shadow: 0 0 10px rgba(255, 255, 255, 1);
  letter-spacing: 1px;
}

JavaScript

const checkbox = document.getElementById('filter1');

let elems = [];

checkbox.addEventListener('click', ({ target: { checked } }) => {
	if (checked) {
    fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then(response => response.json())
    .then(json => displayInfo(json));
  } else {
  	if (elems.length > 0) {
    	for (const elem of elems)
      	elem.remove();
    }
  }
  
}, false);

const displayInfo = info => {
	const elem = document.createElement('div');
  elem.classList.add('info');
  elem.innerText = info.title;
  document.body.append(elem);
  elems.push(elem);
}