function solve() {

    let fields = Array.from(document.querySelectorAll('input')).slice(0, 5)
    let nextBtn = document.querySelector('#next-btn')
    let infoSection = document.querySelector('.info-list')
    let confirmSection = document.querySelector('.confirm-list')
    let verification = document.getElementById('verification');

    function createEl(type, content, klass) {
        const result = document.createElement(type);
        if (content) {
          result.textContent = content;
        }
        if (klass) {
          result.className = klass;
        }
        return result;
      }

      nextBtn.addEventListener("click", onClick);
    function onClick(e) {
      e.preventDefault();
      let[firstName, lastName, dateIn, dateOut, count] = fields
      if(!firstName.value || !lastName.value || !dateIn.value
         || !dateOut.value || !count.value) return

      let li = infoSection.appendChild(createEl('li', undefined, 'reservation-content'))
      let article = li.appendChild(createEl('article'))
      let h3 = article.appendChild(createEl('h3', `Name: ${firstName.value} ${lastName.value}`))
      let p1 = article.appendChild(createEl('p', `From date: ${dateIn.value}`))
      let p2 = article.appendChild(createEl('p', `To date: ${dateOut.value}`))
      let p3 = article.appendChild(createEl('p', `For ${count.value} people`))
      let editBtn = li.appendChild(createEl('button', 'Edit', 'edit-btn'))
      let continueBtn = li.appendChild(createEl('button', 'Continue', 'continue-btn'))


     let editArray = []
     fields.forEach(x => {editArray.push(x.value); x.value = ''})

     buttonsState(true)

      editBtn.addEventListener('click', onEdit)
    function onEdit(){
    // let[h3, p1, p2, p3] = infoSection.querySelectorAll('article')
    // let[firstNameEdit, lastNameEdit, p1Edit, p2Edit, p3Edit] = fields

     //firstNameEdit.value = h3.textContent.split('Name: ')[1]]
     //lastNameEdit.value = h3.textContent.split('Name: ')[2]
     //p1Edit.value = p1.textContent.split('From date: ')[1]
     //p2Edit.value = p2.textContent.split('To date: ')[1]
     //p3Edit.value = p3.textContent.split('For: ')[1]
     fields.forEach((x,i) => {x.value = editArray[i]})
     buttonsState(false)
     infoSection.textContent = ''

  }
  function buttonsState(nextDisabled = true){
    if(nextDisabled){
        nextBtn.disabled = true
       editBtn.disabled = false
       continueBtn.disabled = false
    } else {
        nextBtn.disabled = false
       editBtn.disabled = true
       continueBtn.disabled = true
    }
}
continueBtn.addEventListener('click', onContinue)
function onContinue(){
    let[firstName, lastName, dateIn, dateOut, count] = fields
    let liTwo = confirmSection.appendChild(createEl('li', undefined, 'reservation-content'))
      let articleTwo = liTwo.appendChild(article)
      //let h3Two = articleTwo.appendChild(createEl('h3', `Name: ${firstName.value} ${lastName.value}`))
      //let p1Two = articleTwo.appendChild(createEl('p', `From date: ${dateIn.value}`))
      //let p2Two = articleTwo.appendChild(createEl('p', `To date: ${dateOut.value}`))
      //let p3Two = articleTwo.appendChild(createEl('p', `For ${count.value} people`))
      let confirmBtn = liTwo.appendChild(createEl('button', 'Confirm', 'confirm-btn'))
      let cancelBtn = liTwo.appendChild(createEl('button', 'Cancel', 'cancel-btn'))

    li.remove();

    confirmBtn.addEventListener('click', onConfirm);
    function onConfirm() {
        liTwo.remove();
       buttonsState(false)

        verification.setAttribute('class', 'reservation-confirmed');
        verification.textContent = 'Confirmed.';
    }

    cancelBtn.addEventListener('click',onCancel);
    function onCancel() {

        liTwo.remove();
        buttonsState(false)

        verification.setAttribute('class', 'reservation-cancelled');
        verification.textContent = 'Cancelled.';

    }
   }
  }

}