JSFiddle - React, Tailwind, and code Playground

by Abdallah Okasha

HTML

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
        <div>

      <ul id="books">
        <span style="cursor:pointer; color:#1E90FF;" onclick="addMore()"> Add Books </span>
      </ul>
    </div>
  </body>

</html>

JavaScript

// Code goes here

function addMore() {
  var books = ["book1", "book2", "book3", "book4", "book5", "book6"];
  var myBooks = document.getElementById("books");
  var select = document.createElement("select");
  for (var s in books) {
    var option = document.createElement("option");
    var bk = books[s];
    // option.text = String(bk);
    option.text = bk;
    option.value = String(bk);
    select.appendChild(option);
  }
  select.id = String
  var li = document.createElement("li");
  li.appendChild(select);
  select.id = String('book' + (myBooks.getElementsByTagName("li").length + 1));
  myBooks.appendChild(li);
  // console.log(document.getElementById('asset1').value);
}