JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
  <!-- Content here -->
</div>

<label>
  One
  <input type="checkbox" name="content" value="one" />
</label>

<label>
  Two
  <input type="checkbox" name="content" value="two" />
</label>

<label>
  Three
  <input type="checkbox" name="content" value="three" />
</label>

CSS

label {
  display: block;
}

JavaScript

const contents = {
	one: 'Content one',
  two: 'Content two',
  three: 'Content three'
}

const checked = [];

function onUpdateContent(e) {
	if (!e.target.checked) {
  	// удаляем элемент
    let index = checked.indexOf(e.target);
    
    if (index !== false) {
    	checked.splice(index, 1);
    }
  } else {
  	// добавляем елемент
    checked.push(e.target);
  }
  
  console.log(checked);
  
  // Обновление контента
  const el = document.getElementById('content');
  el.innerHTML = '';
  let newContent = '';
  
  checked.forEach((input) => {
  	const value = input.value;
    
    if (contents.hasOwnProperty(value)) {
      newContent += contents[value] + "<br>";
    }
  })
  
   el.innerHTML = newContent;
}

const selectors = document.querySelectorAll('[name=content]');

console.log(selectors);

selectors.forEach(
	(element) => {
  	element.addEventListener('change', onUpdateContent)
  }
)