JSFiddle - React, Tailwind, and code Playground

by zerrax

HTML

<div class="install_form">
  <ul id="form_next">
    <li class="topmost">
      <div id="item_contrainer">
        <div class="border">
          <label>WebHook Name<input id="name_0" type="text"></label>
          <label>WebHook URL<input id="url_0" type="text"></label>
          <a onclick="remove(this)" data="0" type="new" class="remove" type="button"></a>
        </div>
      </div>
    <div onclick="add()" class="button abs_left">+</div>
    <div class="current_nav"><div onclick="Next()" class="icon" id="icon_wrapper"><svg x="0px" y="0px" width="24.3px" height="23.2px" viewBox="0 0 24.3 23.2" enable-background="new 0 0 24.3 23.2" xml:space="preserve"><polygon class="arrow" fill="#ffffff" points="17.4,8.7 17.4,8.7 8.7,0 5.9,2.8 14.6,11.5 8.7,17.4 8.8,17.3 5.8,20.1 5.9,20.2 8.7,23 20.2,11.5 20.2,11.5"></polygon></svg></div></div>  
    </li>
  </ul>
</div>

CSS

body {
  background: #BE93C5;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #7BC6CC, #BE93C5);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #7BC6CC, #BE93C5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.install_form {
  position: fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
}
.install_form ul {
  position: fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  list-style:none;
  padding:0;
  overflow-y: auto;
}
.install_form ul li {
  position: absolute;
  left: 20%;
  right: 20%;
  top: 0px;
  margin:0 auto;
  list-style:none;
  padding: 50px 10px;
  padding-bottom: 10px;
  padding-top: 20px;
  background:rgba(255,255,255,0.3);
  display: flex;
	flex-direction: column;
  text-align:center;
  border: 4px solid #FFF;
  opacity:0;
      
}
.install_form ul li label{
  display: inline-block;
  text-align: center;
  font-family: 'opensans-bold', Helvetica, Arial, sans-serif;
  color: rgba(0,0,0,0.7);
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
  margin-top: 0px;

}
.install_form ul li input{
  display: block;
  width: 80%;
  padding: 10px 15px;
  border: 1px solid #d0d7e1;
  font-family: "opensans-regular", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #515860;
  letter-spacing: 1px;
  background: #ffffff;
  margin: 0 auto;
  outline: none;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
  -webkit-transition: all .2s linear;
  -moz-transition: all .2s linear;
  -ms-transition: all .2s linear;
  -o-transition: all .2s linear;
  transition: all .2s linear;
}

.topmost{
  z-index:1;
  opacity: 1 !important;
   animation: shake 0.3s;

  /* When the animation is finished, start again */
  animation-iteration-count: 1;
}
.tool{
  width:100%;
  padding:15px;
}
.index_nav{
   width: 60px;
   height: 60px;
   position:...

JavaScript

var item = 0;
function add()
{
	item++;
	var htmldata = '<div class="border"><label>WebHook Name<input id="name_'+item+'" type="text"></label><label>WebHook URL<input id="url_'+item+'" type="text"></label></div>'
  var e = document.createElement('div');
  e.innerHTML = htmldata;
    document.getElementById('item_contrainer').appendChild(e);

}
function remove(a)
{
	alert(a.getAttribute("data"));	
  alert(a.getAttribute("type"));

}
function Next()
{
	var data = {data:[]};
	for(var i = item; i >= 0; i--)
  {
 		var dd = [];
  	dd.push(document.getElementById('name_'+i).value);
    dd.push(document.getElementById('url_'+i).value);
    data.data.push(dd);
  }
		alert(JSON.stringify(data));
		xhttp.open("POST", "install.php", true);
		xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	//	xhttp.send("step="+step+query);
  
}