JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Grocery List</title>
</head>
<body>
<div class="container">
    <h1>Grocery List</h1>
    <input id="add-input" placeholder="Add Groceries" autocomplete="off">
    <button id="add-button">Add</button>
    <!--<button id="remove-button">Remove</button>-->
<div>
    <ul id="grocery-ul">

    </ul>
</div>

<script src="main.js"></script>
</body>
</html>

JavaScript

let addButton = document.getElementById('add-button');
addButton.addEventListener('click', add);

let addInput = document.getElementById('add-input');
//addInput.addEventListener('keydown', add);

addInput.addEventListener('keydown', (key)=>{
	if(key.which == 13){
  add();
  }
});

//let removeButton = document.getElementById('remove-button');
//removeButton.addEventListener('click', remove);

let groceryList = [

]

function add() {
groceryInput = addInput.value;
if(groceryInput) {

groceryList.push(groceryInput);
addInput.value = '';
displayGroceries();

}
}

function remove(event) {
let position = event.currentTarget.id;
groceryList.splice(position, 1);
displayGroceries();
}

function displayGroceries() {
let groceryUl = document.getElementById('grocery-ul');
groceryUl.innerHTML = '';

for (var i = 0; i < groceryList.length; i++) {
    let groceryLi = document.createElement('li');
    groceryLi.innerHTML = groceryList[i];
    groceryUl.appendChild(groceryLi);
     let removeButton = document.createElement('button');
    removeButton.innerText = "Remove";
    removeButton.addEventListener('click', remove);
    removeButton.id = i;
    groceryLi.appendChild(removeButton);

    if(add.keyCode === 13) {
        add();
    }


    }
    }