JSFiddle - React, Tailwind, and code Playground

by Mohd Zaki

HTML

<label for="burung">Nama burung:</label><br>
  <input type="text" name="burung" id="burung"><br><br>
  <input type="submit" onclick="submit()" value="Submit">

<ul id="namaBurung">
  <li>Burung Bangau</li>
  <li>Burung Belatuk</li>
  <li>Burung Bangau</li>
  <li>Burung Helang</li>
  <li>Burung Layang-layang</li>
  <li>Burung Murai</li>
  <li>Burung Pipit</li>
  <li>Burung Unta</li>
  <li>Burung Merak</li>
  <li>Burung Enggang</li>
  <li>Burung Kenari</li>
  <li>Burung Undan</li>
  <li>Burung Emu</li>
  <li>Burung Tiung</li>
  <li>Burung Penguin</li>
  <li>Burung Puyuh</li>
  <li>Burung Hering</li>
  <li>Burung Kakaktua</li>
  <li>Burung Hantu</li>
  <li class="last">Bayan Parakeet</li>
</ul>

CSS

ul#namaBurung li.last {
  cursor: help;
  color:red
}

JavaScript

function submit(){
//remove exsiting li with class last
document.getElementsByClassName("last")[0].classList.remove("last");

var input = document.getElementById("burung").value;
var ul = document.getElementById("namaBurung");
var li = document.createElement('li');
//append li with input value
li.appendChild(document.createTextNode(input));
//add again new li with class name 'last'
li.classList.add("last");
ul.appendChild(li);

}