const skillsList = document.getElementById('skills-list');
const selectedSkills = document.getElementById('selected-skills');
const searchBox = document.getElementById('search-box');
const skills = [];

// Load skills from API
fetch('http://128.214.252.39:8080/skills')
  .then(response => response.json())
  .then(data => {
    // Display all skills initially
    displaySkills(data);

    // Listen for changes to the search box value
    searchBox.addEventListener('input', () => {
      const searchTerm = searchBox.value.toLowerCase();
      const filteredSkills = data.filter(skill => {
        const name = skill['ï»¿name'].toLowerCase();
        const code = skill.code.toLowerCase();
        const info = skill.info.toLowerCase();
        return name.includes(searchTerm) || code.includes(searchTerm) || info.includes(searchTerm);
      });
      displaySkills(filteredSkills);
    });

    // Add skill to list
function addSkillToList(skill) {
  const skillBox = document.createElement('div');
  skillBox.className = 'skill-box';
  skillBox.setAttribute('draggable', true);
  skillBox.dataset.skillName = skill['ï»¿name'];
  skillBox.dataset.skillCode = skill.code;
  skillBox.dataset.skillInfo = skill.info;

  const skillCheckbox = document.createElement('input');
  skillCheckbox.type = 'checkbox';
  skillCheckbox.dataset.skillName = skill['ï»¿name'];
  skillCheckbox.dataset.skillCode = skill.code;
  skillCheckbox.dataset.skillInfo = skill.info;
  skillCheckbox.addEventListener('change', () => {
    const numSelectedSkills = selectedSkills.querySelectorAll('.skill-box').length;
    if (skillCheckbox.checked && numSelectedSkills >= 5) {
      skillCheckbox.checked = false;
      return;
    }

    if (skillCheckbox.checked) {
      // Move skill box to selected skills container
      selectedSkills.appendChild(skillBox);
    } else {
      // Move skill box back to skills list container
      skillsList.appendChild(skillBox);
    }
    sortSkillsList();
  });
  skillBox.appendChild(skillCheckbox);

  const skillName = document.createElement('div');
  skillName.className = 'skill-name';
  skillName.innerText = skill['ï»¿name'];
  skillBox.appendChild(skillName);

  const skillCode = document.createElement('div');
  skillCode.className = 'skill-code';
  skillCode.innerText = skill.code;
  skillBox.appendChild(skillCode);

  const skillInfo = document.createElement('div');
  skillInfo.className = 'skill-info';
  skillInfo.innerText = skill.info;
  skillBox.appendChild(skillInfo);

  // Add the skill box to the correct position in the skills list container
  const skillBoxes = skillsList.querySelectorAll('.skill-box');
  let i;
  for (i = 0; i < skillBoxes.length; i++) {
    const name = skillBoxes[i].dataset.skillName.toLowerCase();
    if (skill['ï»¿name'].toLowerCase() < name) {
      skillsList.insertBefore(skillBox, skillBoxes[i]);
      break;
    }
  }
  if (i === skillBoxes.length) {
    skillsList.appendChild(skillBox);
  }
}

    


// Sort the skills list container
function sortSkillsList() {
  const skillBoxes = skillsList.querySelectorAll('.skill-box');
  const sortedSkillBoxes = Array.from(skillBoxes).sort((a, b) => {
    const aName = a.dataset.skillName.toLowerCase();
    const bName = b.dataset.skillName.toLowerCase();
    return aName.localeCompare(bName);
  });
  skillsList.innerHTML = '';
  sortedSkillBoxes.forEach(skillBox => skillsList.appendChild(skillBox));
}


    // Display skills in list
    function displaySkills(skills) {
      skillsList.innerHTML = '';
      selectedSkills.innerHTML = '';
      skills.forEach(skill => addSkillToList(skill));
    }
  });
so lets make this site so that when 5 skills are selected a continue button shows up under the left container skill box. when  continue button is pressed, the already 5 selected skills are stored up in memory as json format as some variable and removed from the view. the 5 selected counter also restarts and new 5 skills can be selected. note that the already selected skills must disappear from left list when continue is pressed so they cannot be selected again
modify the javascript as needed