please help to fix this issue, i need to increment id every time user clone row by press button, now clone working well but the problem with id =, i need to generate new id with every clone and put it in value of textbox "file id" check the code also here jsfiddle
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$( ".add-row" ).click(function(){
var $clone = $( "ul.personal-details" ).first().clone();
$clone.append( "<button type='button' class='remove-row'>-</button>" );
$clone.insertBefore( ".add-row" );
});
$( ".form-style-9" ).on("click", ".remove-row", function(){
$(this).parent().remove();
});
});
</script>
</head>
<body>
<span class="form-style-9">
<ul class="personal-details">
<table class="stretch" border="0">
<tr>
<td><label for="fname">File ID</label>
<input name="fileid2[]" type="text" class="stretchnights" id="fileid2" value=""></td>
<td>
<label for="fname">First Name</label>
<input name="fname[]" type="text" class="stretch" size="15" maxlength="30" required >
</td>
<td>
<label for="lname">Last Name</label>
<input name="lname[]" type="text" class="stretch" size="15" maxlength="30" required >
</td>
</tr>
</table>
</ul>
<button type="button" class="add-row">+ New Client</button>
<table width="25%" border="0"> <tr> <input type="submit" name="Submit" value="Insert"></tr></table>
</span>
</body>
</html>
1st: select the input in the clone by using $clone.find('.stretchnights');
2nd: to increase id by one each time you click the addrow button you need to set a variable outside the click event var id=0
change 0 with any number you need to start with
3rd: change input id by using .attr('id' , newid)
and change its value by using .val(newid)
you can do this two things in just one line
4th: increase id by one after finish append by using id++
$(document).ready(function(){
var id = 0; // change 0 to the number you want to start with
$( ".add-row" ).click(function(){
var $clone = $( "ul.personal-details" ).first().clone();
var $input = $clone.find('.stretchnights');
$input.val('fileid'+id).attr('id' , 'fileid'+id) // change fileid with any string you want
$clone.append( "<button type='button' class='remove-row'>-</button>" );
$clone.insertBefore( ".add-row" );
id++; // increase id by 1
});
$( ".form-style-9" ).on("click", ".remove-row", function(){
$(this).parent().remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="form-style-9">
<ul class="personal-details">
<table class="stretch" border="0">
<tr>
<td><label for="fname">File ID</label>
<input name="fileid2[]" type="text" class="stretchnights" id="fileid2" value="fileid2"></td>
<td>
<label for="fname">First Name</label>
<input name="fname[]" type="text" class="stretch" size="15" maxlength="30" required >
</td>
<td>
<label for="lname">Last Name</label>
<input name="lname[]" type="text" class="stretch" size="15" maxlength="30" required >
</td>
</tr>
</table>
</ul>
<button type="button" class="add-row">+ New Client</button>
<table width="25%" border="0"> <tr> <input type="submit" name="Submit" value="Insert"></tr></table>
</span>