JSFiddle - React, Tailwind, and code Playground

by Andrew Lyndem

HTML

<h1>What would you like to add?</h1> 
 <input type="text" id="item" /> 
 <button type="button" id="addToMarket">Markt</button> 
 <button type="button" id="addToOnline">Online</button> 
 <h2>Buy at a store:</h2> 
 <ul id="marketList"></ul> 
 <h2>Buy online:</h2> 
 <ul id="onlineList"></ul>

JavaScript

document.getElementById("addToMarket").addEventListener("click", addToMarketList);

document.getElementById("addToOnline").addEventListener("click", addToOnlineList);


var listForMarket = " ";
var listForOnlineShop = " ";

function addToMarketList() {
    var gottaBuy = document.getElementById("item").value;
    listForMarket = listForMarket + "<li>" + gottaBuy + "</li>";
    document.getElementById("marketList").innerHTML = listForMarket;
    document.getElementById("item").value = " ";
}

function addToOnlineList() {
    var gottaBuy = document.getElementById("item").value;
    listForOnlineShop = listForOnlineShop + "<li>" + gottaBuy + "</li>"
    document.getElementById("onlineList").innerHTML = listForOnlineShop;
    document.getElementById("item").value = " ";
}

window.addEventListener("load", sortItem1);
window.addEventListener("load", sortItem2);