JSFiddle - React, Tailwind, and code Playground

add element by click button

by oktaviardi pratama

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<ul class="table-list" id="list">
  <li>data1 <i class="btnDel fa fa-times"></i></li>
  <li>data2 <i class="btnDel fa fa-times"></i></li>
  <li>data3 <i class="btnDel fa fa-times"></i></li>
</ul>
<button class="btn btn-primary"  id="btnAdd" value="Add" onclick="addItem();">
  <i class="fa fa-plus"></i> add more
</button>

SCSS

.table-list{
  list-style:none;
  padding-left:0;
  width:250px;
  li{
    padding:10px 5px;
    border:solid #ccc 1px;
    
  }
}

JavaScript

addItem = function() {
    var ul = document.getElementById("list");
    var li = document.createElement("li");
    var children = ul.children.length + 1
    li.setAttribute("id", "element"+children)
    li.appendChild(document.createTextNode("Element "+children));
    ul.appendChild(li)
}