Clone Input fields

Clone input fields in jquery

by Varun Krishna P

HTML

<script src="https://code.jquery.com/jquery-2.2.3.js"></script>
<table border='1'>
<tr>
  <td>test</td>
  <td>test</td>
  <td>test</td>
  <td>test</td>
  <td>test</td>
  <td>
    <div class='fields'>
      <input type='text' placeholder="clone" class='clone-field'/>
      <input type='button' value='Add' class='btn-add'/>
      <input type='button' value="Delete" class="hide" class='clone-field'/>
    </div>
    <div class="cloned-fields">
    
    </div>
    
  </td>
</tr>
</table>

CSS

.hide{
  display: none;
}

JavaScript

$(function(){
	cloneFields();
});

function cloneFields(){
	$(".btn-add").click(function(){
  	$('.fields').find('clone-field').clone().each(function() {
    	var input = $('inupt[type="text"]');
      input.val('');
      $('.fields').find('.btn-remove').removeAttr('hide');
    });
    $(this).appendTo($('.cloned-fields'));
  });
}