JSFiddle - React, Tailwind, and code Playground

by Ben Schnell

HTML

<div id="cities">
  <ul>
    <li class="city">New York</li>
    <li class="city">Seattle</li>
    <li class="city">Los Angeles</li>
    <li class="city">Atlanta</li>
  </ul>
</div>

<div id="thingsToDo">
  <ul>
    <li class="todo">Restaurants</li>
    <li class="todo">Theatres</li>
    <li class="todo">Museums</li>
  </ul>
</div>

<button id="combine">Combine</button>

<div id="combined">
  <ul id="cityList">
  
  </ul>
</div>

JavaScript

const cities = document.getElementById('cities');
const thingsToDo = document.getElementById('thingsToDo');
const combine = document.getElementById('combine');
const combined = document.getElementById('combined');
const cityList = document.getElementById('cityList');

combine.addEventListener('click', function(e){
 
  let allCities = document.querySelectorAll('li.city');
  
  [].forEach.call(allCities, function(city){
  	let cityHeader = document.createElement('h3');
    cityHeader.innerText = city.innerText;
    cityList.appendChild(cityHeader);
    
    let thingsToDoList = document.createElement('ul');
    thingsToDoList.setAttribute('class', 'thingsToDoList');
   	cityList.appendChild(thingsToDoList);
    
    let newThingsList = document.querySelectorAll('.thingsToDoList');
    [].forEach.call(newThingsList, function(tList){
    	console.log(newThingsList);
    	let allThingsToDo = document.querySelectorAll('li.todo');
    	[].forEach.call(allThingsToDo, function(thing){
        tList.appendChild(thing);
      }) 
    })
  })
});