JSFiddle - React, Tailwind, and code Playground

by GregoireMTL

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<form action="javascript:void(0);" method="POST" autocomplete="off">
    <input type="submit" value="Submit">
    <br>
    <br>
    <div class="bigjane"><button id="add">Add Field</button>
        <div class='input_line'>
            <input type="text" name="input_0" placeholder="Input1"><input type="text" name="input_0" placeholder="Input2"><input type="text" name="input_0" placeholder="Input3"><input type="button" class="duplicate" value="duplicate"><input type="button" class="remove" value="remove"><br></div>
    </div>
</form>

CSS

#add
{
    float: left;
    
}

JavaScript

jQuery(document).ready(function () {
    'use strict';
    var input = 1,
        button = ("<button class='add'>Add Field</button>");
    var blank_line = $('.input_line').clone();
    $('#add').click(function () {
       
        $('form').append(blank_line.clone())
        $('.input_line').last().before($(this));
    });
    
    $('form').on('click', '.remove', function () {
        $(this).parent().remove();
         $('.input_line').last().before($('#add'));
        input = input - 1;
    });
    
    $('form').on('click', '.duplicate', function () {
       $('form').append($(this).parent().clone());
          $('.input_line').last().before($('#add'));
        input = input + 1;
    });
});