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>
<hr>
Модалка:
<div class="modal">Здесь ничего нет</div>

<br>
<hr>
в этот див выводим содержимое localstogage, чтобы наглядно видеть его содержимое:
<div id="inlocalstorrage"></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'),
      // добавил еще 1 див, в него для наглядности вывожу содержимое list
      ls = document.getElementById('inlocalstorrage'),
      // теперь list это массив, соответственно ключи в нем будут 0, 1, 2, и т.д.
      list = JSON.parse(localStorage.getItem(localStorageKey)) || [];




// в самый нижний див выводим содержимое localstogage, чтобы наглядно видеть его содержимое
ls.innerText = JSON.stringify(list, null, '⁣⁣⁣  ');

  modal.innerHTML = list.map(item=>{
    document.getElementById(item.id).checked = true;
		return item.id + ': ' + item.p;
  }).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) {
    // так как лист теперь массив, появилась эта функция для удаления ненужных записей
    // так как id теперь спрятан внутри объекта, то такой вариант работать не будет
    //    const iof = arrCurrent.indexOf(id);
    //    arrCurrent.splice(iof, 1);
    // поэтому делаем через фильтр, так полюбому надежнее)
  	list = list.filter(item=>elem.id==item.id?false:true);
  }
  
  function addToList(elem) {
    let wrapper = elem.closest(groupWrapperSelector);
    // теперь мы вставляем объект содержащий свойства id и p
    // в свойство p вносим innerText из всех P найденых с помощью wrapper.querySelector(selector)
    list.push({
    	id: elem.id,
      p: dataSelectors.map(selector => wrapper.querySelector(selector).innerText).join(' ')
    });
  }

  function updateModal(list) {
    // тут я до сих пор не понимаю что вы хотите увидеть в модальном окне, поэтому пока такой вывод.
    //...