JSFiddle - React, Tailwind, and code Playground

by VixedS

HTML

<div class="divform">
    <button class="add_input"></button>
    <button class="minus_input"></button>
    <div class="form">
      <input type="text" name="address" placeholder="address" class="address" />
    </div>
</div>
 
<div class="divform">
    <button class="add_input"></button>
    <button class="minus_input"></button>
    <div class="form">
       <input type="text" name="address" placeholder="address" class="address" >
    </div>
</div>

CSS

body{background:#EEE}
.form{padding:20px;background:#DDD;margin:20px}
.active{border:1px solid #CDF;background:#FFF}
input{padding:5px 10px;}
.add_input{border:0;width:25px;height:25px;background:transparent url(http://www.traveltoathens.eu/wp-content/uploads/plus-square-o-1.png)}
.minus_input{border:0;width:25px;height:25px;background:transparent url(http://www.traveltoathens.eu/wp-content/uploads/minus-square-o-1.png)}

JavaScript

$(".add_input" ).on("click", function() {
        var formActive = $(this).parent();
 $('.form:first',formActive).clone().val('').appendTo(formActive).focus();
    });
    
    $(".minus_input" ).on("click", function() {
        var formActive = $(this).parent();
        if ($('.form',formActive).length>1)
             $('.form:last',formActive).remove()
    });