Display And Delete Multiple Cookies In Javascript

I want to display the last three search values on the website using javascript cookies. I store last three values but when I display in view it displays everything together. I have

Solution 1:

I wrote a solution on codepen - https://codepen.io/darius9171/pen/JBBRaz

Stackoverflow does not allow you to work in snippets with cookies, but requires you to write code when you specify a link to codepen. So don't pay attention to the snippet :D

//set cookiesconst cookies = ['Dubai', 'India', 'SriLanka'];
cookies.forEach((name, i) =>document.cookie = `${i+1}=${name};`);

//renderconst list = document.querySelector('.list');
document.cookie.split('; ').forEach(cookie => {
  const pair = cookie.split('=');
  
  list.innerHTML += `<div class="cookie" data-name="${pair[0]}">${pair[1]} <span class='rmvcookie'>x</span></div>`
})

document.querySelectorAll('.rmvcookie').forEach(span => {
  span.addEventListener('click', (event) => {
    const parent = event.currentTarget.parentNode;
    document.cookie = `${parent.dataset.name}=; expires=Thu, 01 Jan 1970 00:00:01 GMT;`;
    parent.parentNode.removeChild(parent);
  })
})

span {
  color: blue;
  cursor: pointer;
}

<divclass="list"></div>