JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <p><input class="check" id="check-option-1" name="name" type="checkbox">
  <label for="check-option-1"></label>
  </p>
  <p class="copy">1</p>
  <p class="copy-2">1.1</p>
</div>
<div>
  <p><input class="check" id="check-option-2" name="name" type="checkbox">
  <label for="check-option-2"></label>
  </p>
  <p class="copy">2</p>
  <p class="copy-2">2.1</p>
</div>

<br><br>Модалка:
<div class="modal">Здесь ничего нет</div>

CSS

.modal {
  padding: 1em;
  border: dashed 2px tomato;
}

.modal p {
  outline: solid 1px gray;
}

JavaScript

(function(){
  let checkboxSelector = 'input.check',
      groupWrapperSelector = 'div',
      dataSelectors = ['.copy', '.copy-2'],
      localStorageKey = 'savedItems',
      modal = document.querySelector('.modal'),
      list = JSON.parse(localStorage.getItem(localStorageKey)) || [];

  modal.innerHTML = list.map(item=>{
    document.getElementById(item.id).checked = true;
		return item.id + ': ' + item.p.map(text=>'<p>'+text+'</p>').join('');
  }).join("<br/>");


  document.addEventListener('change', evt => {
    if (evt.target.matches(checkboxSelector)) {
      if (evt.target.checked) {
        addToList(evt.target)
      } else {
      	deleteFromList(evt.target)
      }
      updateModal(list)
      saveChanges(list)
    }
  })

	function deleteFromList(elem) {
  	list = list.filter(item=>elem.id==item.id?false:true);
  }
  
  function addToList(elem) {
    let wrapper = elem.closest(groupWrapperSelector);
    
    list.push({
    	id: elem.id,
      p: dataSelectors.map(selector => wrapper.querySelector(selector).innerText )
    });
  }

  function updateModal(list) {
    modal.innerHTML = list.map(item=>{
    	return item.id + ': ' + item.p.map(text=>'<p>'+text+'</p>').join('');
    }).join("<br/>");
  }

  function saveChanges(list) {
    localStorage.setItem(localStorageKey, JSON.stringify(list))
  }
})()