JSFiddle - React, Tailwind, and code Playground

by Varun Krishna P

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<a class="btn btn-default" href="#" id="addTxt">Add Text</a>

<div id="nF">
    <div class="form-inline" id="">
        <div class="input-group">
            <div class="input-group-addon"><i class="fa fa-text-width"></i>
            </div>
            <input class="form-control" id="project_components_attributes_32943600_name" name="project[components_attributes][32943600][name]" type="text"> <span class="input-group-btn">
        <input id="project_components_attributes_32943600__destroy" name="project[components_attributes][32943600][_destroy]" type="hidden" value="false">
		<a class="btn btn-default" data-selector="removeField" href="#">
		  <i class="fa fa-remove"></i>
</a>      </span>

        </div>
    </div>
</div>

CSS

.form-inline {
    margin-bottom:10px;
}

JavaScript

$(document).ready(function(){
    $('#addTxt').click(function(){
        var time = new Date().getTime();
        var $target = $('#nF').find('div.form-inline:first');
        $target.clone().appendTo('#nF');
        $target.find('input').each(function(){
           console.log(time);
           $(this).val('');
           var tID = $(this).attr("id").split(/_/);
           var re = new RegExp(tID[3],"g");
           var newID = $(this).attr('id').replace(re, time);
           var newName = $(this).attr('name').replace(re, time);
           $(this).attr('id', newID);
           $(this).attr('name', newName);
        });
    });
});