Что бы работало в двух блоках

[Сергей Ракипов]

Вот код

document.addEventListener('DOMContentLoaded', function () {
  const feelContainer = document.querySelector('.feel');
  const showContainer = document.querySelector('.show');

  // Функция загрузки данных из JSON файла
  fetch('data/data.json')
    .then(response => response.json())
    .then(data => {
      // Создаем блоки на основе данных
      data.forEach(item => {
        const feelBlock = createFeelBlock(item);
        feelContainer.appendChild(feelBlock);
      });
      loadState();
    })
    .catch(error => console.error('Ошибка при загрузке данных:', error));

  function createFeelBlock(item) {
    const feelBlock = document.createElement('div');
    feelBlock.classList.add('feel-block');
    feelBlock.id = item['feel-id'];

    // Добавляем структуру блока
    feelBlock.innerHTML = `
      <div class="feel-header">
        <div class="feel-title">${item['feel-title']}</div>
        <div class="feel-panel">
          <div class="up-arrow"></div>
          <div class="down-arrow"></div>
          <div class="hide-show"></div>
          <div class="clearing"></div>
          <div class="flip"></div>
          <div class="right-left-arrow"></div>
        </div>
      </div>
      <div class="definition-example">
        <div class="definition-example-sample">
          <div class="feel-definition-sample">
            <p>Определение</p>
            <p>${item['feel-definition']}</p>
          </div>
          <div class="feel-examples-sample">
            <p>Примеры</p>
            ${item['feel-examples']}
          </div>
        </div>
        <div class="definition-example-your-text" style="display: none;">
          <div class="feel-definition-your-text">
            <textarea rows="1" placeholder="Напиши небольшое определение" class="textarea"></textarea>
          </div>
          <div class="feel-examples-your-text">
            <textarea rows="1" placeholder="Приведи короткие примеры" class="textarea"></textarea>
          </div>
        </div>
      </div>
    `;
    addEventListeners(feelBlock);
    return feelBlock;
  }

  function addEventListeners(block) {
    const upArrow = block.querySelector('.up-arrow');
    const downArrow = block.querySelector('.down-arrow');
    const hideShow = block.querySelector('.hide-show');
    const clearing = block.querySelector('.clearing');
    const flip = block.querySelector('.flip');
    const rightLeftArrow = block.querySelector('.right-left-arrow');

    const definitionExample = block.querySelector('.definition-example');
    const sampleText = block.querySelector('.definition-example-sample');
    const yourText = block.querySelector('.definition-example-your-text');

    const definitionTextarea = block.querySelector('.feel-definition-your-text .textarea');
    const examplesTextarea = block.querySelector('.feel-examples-your-text .textarea');

    // Сохранение текста при вводе
    definitionTextarea.addEventListener('input', saveText);
    examplesTextarea.addEventListener('input', saveText);

    function saveText() {
      const id = block.id;
      const data = {
        definition: definitionTextarea.value,
        examples: examplesTextarea.value
      };
      localStorage.setItem(`feel-text-${id}`, JSON.stringify(data));
    }

    // Загрузка сохраненного текста
    const savedData = JSON.parse(localStorage.getItem(`feel-text-${block.id}`));
    if (savedData) {
      definitionTextarea.value = savedData.definition;
      examplesTextarea.value = savedData.examples;
    }

    // Перемещение блока вверх
    upArrow.addEventListener('click', function () {
      const prevBlock = block.previousElementSibling;
      if (prevBlock && prevBlock.classList.contains('feel-block')) {
        feelContainer.insertBefore(block, prevBlock);
        saveOrder();
      }
    });

    // Перемещение блока вниз
    downArrow.addEventListener('click', function () {
      const nextBlock = block.nextElementSibling;
      if (nextBlock && nextBlock.classList.contains('feel-block')) {
        feelContainer.insertBefore(nextBlock, block);
        saveOrder();
      }
    });

    // Скрытие/отображение definition-example
    hideShow.addEventListener('click', function () {
      if (definitionExample.style.display === 'none') {
        definitionExample.style.display = '';
      } else {
        definitionExample.style.display = 'none';
      }
      saveVisibility(block.id, definitionExample.style.display !== 'none');
    });

    // Очистка введенного текста
    clearing.addEventListener('click', function () {
      definitionTextarea.value = '';
      examplesTextarea.value = '';
      localStorage.removeItem(`feel-text-${block.id}`);
    });

    // Flip card эффект
    flip.addEventListener('click', function () {
      if (sampleText.style.display === 'none') {
        sampleText.style.display = '';
        yourText.style.display = 'none';
      } else {
        sampleText.style.display = 'none';
        yourText.style.display = '';
      }
      saveFlipState(block.id, sampleText.style.display !== 'none');
    });

    // Перемещение блока между feel и show
    rightLeftArrow.addEventListener('click', function () {
      if (block.parentElement === feelContainer) {
        showContainer.appendChild(block);
      } else {
        feelContainer.appendChild(block);
      }
      saveLocation(block.id, block.parentElement.classList.contains('feel') ? 'feel' : 'show');
    });

    // Загрузка состояний при инициализации
    loadBlockState(block);
  }

  // Сохранение порядка блоков
  function saveOrder() {
    const ids = Array.from(feelContainer.querySelectorAll('.feel-block')).map(block => block.id);
    localStorage.setItem('feel-order', JSON.stringify(ids));
  }

  // Сохранение видимости блока
  function saveVisibility(id, isVisible) {
    const visibility = JSON.parse(localStorage.getItem('feel-visibility')) || {};
    visibility[id] = isVisible;
    localStorage.setItem('feel-visibility', JSON.stringify(visibility));
  }

  // Сохранение состояния flip
  function saveFlipState(id, isSampleVisible) {
    const flipState = JSON.parse(localStorage.getItem('feel-flip')) || {};
    flipState[id] = isSampleVisible;
    localStorage.setItem('feel-flip', JSON.stringify(flipState));
  }

  // Сохранение местоположения блока
  function saveLocation(id, location) {
    const locations = JSON.parse(localStorage.getItem('feel-location')) || {};
    locations[id] = location;
    localStorage.setItem('feel-location', JSON.stringify(locations));
  }

  // Загрузка состояния блоков
  function loadState() {
    // Восстановление порядка блоков
    const order = JSON.parse(localStorage.getItem('feel-order'));
    if (order) {
      order.forEach(id => {
        const block = document.getElementById(id);
        if (block) {
          feelContainer.appendChild(block);
        }
      });
    }

    // Восстановление местоположения блоков
    const locations = JSON.parse(localStorage.getItem('feel-location'));
    if (locations) {
      Object.keys(locations).forEach(id => {
        const block = document.getElementById(id);
        if (block) {
          if (locations[id] === 'show') {
            showContainer.appendChild(block);
          } else {
            feelContainer.appendChild(block);
          }
        }
      });
    }
  }

  // Загрузка состояния конкретного блока
  function loadBlockState(block) {
    const id = block.id;

    // Видимость definition-example
    const visibility = JSON.parse(localStorage.getItem('feel-visibility')) || {};
    if (visibility[id] === false) {
      block.querySelector('.definition-example').style.display = 'none';
    }

    // Состояние flip
    const flipState = JSON.parse(localStorage.getItem('feel-flip')) || {};
    if (flipState[id] === false) {
      block.querySelector('.definition-example-sample').style.display = 'none';
      block.querySelector('.definition-example-your-text').style.display = '';
    }
  }
});

[Сергей Ракипов]

Я понимаю что это огромный код и мне лишь нужно изменить одну функцию в этом коде, вот она

// Перемещение блока вверх
      upArrow.addEventListener('click', function () {
        const prevBlock = block.previousElementSibling;
        if (prevBlock && prevBlock.classList.contains('feel-block')) {
          feelContainer.insertBefore(block, prevBlock);
          saveOrder();
        }
      });

      // Перемещение блока вниз
      downArrow.addEventListener('click', function () {
        const nextBlock = block.nextElementSibling;
        if (nextBlock && nextBlock.classList.contains('feel-block')) {
          feelContainer.insertBefore(nextBlock, block);
          saveOrder();
        }
      });

это функция перемещает блоки вверх низ сохраняет и запоминает

НО!!!! только в блоке feel

А МНЕ НУЖНО ЧТО БЫ что это перемещение вверх и вниз, запоминание и вывод было у каждого блока свое, как у feel, так и show.

[Сергей Ракипов]

Что я пробую сделать

// Перемещение блока вверх
    upArrow.addEventListener('click', function () {
      const prevBlock = block.previousElementSibling;
      if (prevBlock && prevBlock.classList.contains('feel-block')) {
        feelContainer.insertBefore(block, prevBlock);
        saveOrderFeel();
      }
    });

    // Перемещение блока вниз
    downArrow.addEventListener('click', function () {
      const nextBlock = block.nextElementSibling;
      if (nextBlock && nextBlock.classList.contains('feel-block')) {
        feelContainer.insertBefore(nextBlock, block);
        saveOrderFeel();
      }
    });

    // Перемещение блока вверх
    upArrow.addEventListener('click', function () {
      const prevBlock = block.previousElementSibling;
      if (prevBlock && prevBlock.classList.contains('feel-block')) {
        showContainer.insertBefore(block, prevBlock);
        saveOrderShow();
      }
    });

    // Перемещение блока вниз
    downArrow.addEventListener('click', function () {
      const nextBlock = block.nextElementSibling;
      if (nextBlock && nextBlock.classList.contains('feel-block')) {
        showContainer.insertBefore(nextBlock, block);
        saveOrderShow();
      }
    });

  // Сохранение порядка блоков
  function saveOrderFeel() {
    const idsFeel = Array.from(feelContainer.querySelectorAll('.feel-block')).map(block => block.id);
    localStorage.setItem('feel-order-feel', JSON.stringify(idsFeel));
  }

  function saveOrderShow() {
    const idsShow = Array.from(showContainer.querySelectorAll('.feel-block')).map(block => block.id);
    localStorage.setItem('feel-order-show', JSON.stringify(idsShow));
  }

  function loadState() {
    // Восстановление порядка блоков
    const orderFeel = JSON.parse(localStorage.getItem('feel-order-feel'));
    if (orderFeel) {
      orderFeel.forEach(id => {
        const block = document.getElementById(id);
        if (block) {
          feelContainer.appendChild(block);
        }
      });
    }

    const orderShow = JSON.parse(localStorage.getItem('feel-order-show'));
    if (orderShow) {
      orderShow.forEach(id => {
        const block = document.getElementById(id);
        if (block) {
          showContainer.appendChild(block);
        }
      });
    }

И работает очень коряво а точнее не сохраняет положение

[Сергей Ракипов]

Пробую GPT но что то я не могу применить из решения.

[Сергей Ракипов]

Нашел решения

[eggycar76]

Quordle, an intriguing and tough word game, requires the player to guess eight different words at the same time. Playing this game is an excellent way to unwind, expand your vocabulary, and enhance your mind.