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)) || {}

  if (Object.keys(list).length) {
  	modal.innerHTML='';
    for (let key in list) {
      document.getElementById(key).checked = true
      modal.innerText += JSON.stringify(list[key], null, '⁣⁣⁣  ')
    }
  }

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

  function addToList(elem) {
    list[elem.id] = {};
    //parentNode
    let wrapper = elem.closest(groupWrapperSelector);
    dataSelectors.forEach((selector,index) => {
      let cur = wrapper.querySelector(selector);
      console.log(cur);
      list[elem.id][index] = ({
      	id: elem.id,
        class: cur.className,
        text: cur.innerText
      });
        
    })
  }

  function updateModal() {
    modal.innerText = Object.values(list).map(item=>JSON.stringify(item, null, '⁣⁣⁣  ')).join('')
  }

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