<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>

<div class="preview"><i class="fa fa-share" aria-hidden="true"></i></div>
<div class="modal">Здесь ничего нет</div>

* {
  box-sizing: border-box;
}

div p {
  display: inline-block;
  vertical-align: middle;
}

input[type="checkbox"] {
    display: none;
    margin: 0;
}

label {
  position: relative;
  display: inline-block;
}

label, .preview {
  user-select: none;
}

input[type="checkbox"] + label:before {
    content: "";
    width: 20px;
    height: 20px;
    display: inline-block;
    margin: 5px 5px 0 0;
    border: 1px solid #808080;
}

input[type="checkbox"] + label:after {
    content: "";
    position: absolute;
    top: 11px;
    left: 6px;
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
    background-color: #808080;
    opacity: 0;
}

input[type="checkbox"]:checked + label:after {
    opacity: 1;
}

.modal {
  position: absolute;
  left: -410px;
  width: 400px;
  height: 400px;
  border: 1px solid #000;
  background-color: #fff;
  transition: 0.6s ease;
}

.modal-show {
  left: 75px;
}

.preview {
  display: inline-block;
}

.preview i {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 2px;
  background-color: gray;
  text-align: center;
  line-height: 50px;
  color: #fff;
  font-size: 30px;
  cursor: pointer;
}

// простенький класс, для упрощения сохранения 
// и чтения массивов объектов в localStorage
class Stogage {
    constructor(name){
      // конструктор. создает в localStorage 
      // именованное хранилище

      // запоминаем название именованного хранилища
      this.name = name;

      // создаем ассоциативный массив в котором для
      // быстрого доступа будут кэшироваться объекты
      // сохраняемые в именованном хранилище
      this.hash = {};
      
      // если в localStorage уже есть данные 
      // сохраненые под ключем с именем this.name
      // то считываем их в this.hash
      let text = localStorage.getItem(this.name);
      if(text)
        this.hash = JSON.parse(text);
      
      // сохраняем ассоциативный массив this.hash в
      // localStorage под именем this.name 
      this.save();  
    }
  
    get(id){
      // получить значение по его id из именованного хранилища 
      // с именем this.name
      return this.item.find(item=>item.id===id)
    }
  
    set(id, data){
      // сохранить значение по его id в именованном хранилище
      // с именем this.name
      
      // если data равна пустой строке, нулю, false или undefined
      // удаляем значение по ключу id
      if(!data)
        return this.del(id);
      
      this.hash[id] = data;
      this.save();
    }
  
    del(id){
      // удалить значение по его id в именованном хранилище
      // с именем this.name
      delete this.hash[id];
      this.save();
    }

    save(){
      // преобразуем ассоциативный массив this.hash в массив list
      this.list = Object.values(this.hash);
      
      // преобразуем массив list в строку text
      const text = JSON.stringify(this.hash);
      
      // сохраняем строку text в localStorage под
      // именем this.name
      localStorage.setItem(this.name, text);      
    }
    
}





// создаем объект класса Stogage для хранения массива
// объектов в localStorage. Данные будут считаны из
// localStorage по ключу 'local'. Если localStorage 
// нет данных с таким ключем, то будет создана запись
// с именем 'local'
const cart = new Stogage('local');
// ВАЖНО!!!
// внесение и удаление данных производите только через 
// методы cart.set и cart.del
// для чтения данных можно обращаться к методу cart.get
// или напрямую к cart.list (массив) или cart.hash (ассоциативный массив)



// зачем каждый раз искать окно '.modal' если можно
// сделать это 1 раз? 
// Вынес сюда из оббработчика $('body').on('change'
const modal = $('.modal');

// перерисовывает модальное окно на основе текущих данных в локалсторадж
function reDrawModal(list){
  let html = "";
  list.forEach(item=>{
    html += '<div class="item">';
    html += item.list.map(element=>{
      return '<'+element.tag+' class="'+element.class+'">'
        +element.text
        +'</'+element.tag+'>';
    }).join(' ');
    html += '</div>';
  });
  
  if(html){
    modal.addClass('modal-show').html(html);
  }else{
    modal.removeClass('modal-show').text('Здесь ничего нет');;
  }
}

reDrawModal(cart.list);

// прокручиваем в цикле все записи из cart
cart.list.forEach(item=>{
  // если есть такой элемент, выставляем ему true
  $('#' + item.id).prop('checked', true);
});


// setModal
$('body').on('change', '.check', function(){
  let id = $(this).attr('id');

  if ($(this).prop('checked')) {
    // подготавливаем объект data. вносим в него
    // id и список дочерних элементов с классами '.copy, .copy-2'
    const data = {
      id: id,
      list: []
    };

    // получаем список элементов
    const elements = $(this)
      .parent()
      .siblings('.copy, .copy-2');

    
    // заполняем data.list данными об элементах
    for(var i=0; i<elements.length; i++ ){
      const item = elements[i];
      console.log("item:", item);
        data.list.push({
          tag: item.tagName,
          class: item.className,
          text: item.innerText
        });      
    }
    
    console.log("data:",data);
    
    // заносим объект data в cart под текущим id
    cart.set(id, data);
  } else {
    // удаляем из cart итем с id
    cart.del(id);
  }
  
  // перерисовать модалку
  reDrawModal(cart.list);
});

$('.preview').click(function(){
  $(".modal").toggleClass("modal-show");
});