Change part of an attribute after cloning with jQuery - html

Question

I have a table with different inputs. Using a button, I want to clone the last row of the table, and add it to the table. Furthermore, I want to replace the "index" in the name with the variable of the index.
How can I replace the string "index" with the variable index?
In this example I just show one input, because it is sufficient to get a clue.
<table class='taskTable'>
<tr>
<td>
<input name='data[index][description]'></input>
<input name='data[index][text]'></input>
<input name='data[index][date]'></input>
</td>
</tr>
</table>
<button type='button' class='addTask'>Add Row</button>
<script>
var index = 1;
$(".addTask").on('click', function(){
index = index+1;
var lastTr = $('.taskTable').find('tr:last').clone();
//replace now the string index of the name with the variable
$('.taskTable').append(lastTr);
});
</script>
Here is a link to the jsFiddle
https://jsfiddle.net/tg53c96m/

Answer 1

Set the name with .attr("name", value):
var newName = `data[${index}][description]`;
lastTr.find("input").attr("name", newName);
Or if you want to search/replace:
lastTr.find("input").attr("name",
(i, oldName) => oldName.replace(/\[.*\]\[/, `[${index}][`));
var index = 1;
$(".addTask").on('click', function() {
index = index + 1;
var lastTr = $('.taskTable').find('tr:last').clone();
lastTr.find("input").attr("name",
(i, oldName) => oldName.replace(/\[.*\]\[.*\]$/, `[${index}][description]`));
console.log("New name: ", lastTr.find("input").attr("name"));
$('.taskTable').append(lastTr);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class='taskTable'>
<tr>
<td>
<input name='data[index][description]'>
</td>
</tr>
</table>
<button class='addTask'>Add Row</button>

Answer 2

Update
Just saw the edited HTML so here's the added function to handle multiple inputs with different names:
lastTr.find('input').each(function() {
let nameText = $(this).attr('name');
let newName = nameText.split('index').join(rows);
$(this).attr('name', newName);
});
In order to change the pattern of each name without having to remember which one is which is to handle only the portion of the names that actually changes:
let newName = nameText.split('index').join(rows);
nameText is the current input name which is s String value of either:
'data[index][description]',
'data[index][text]',
/* OR */
'data[index][date]'
When .split() into an Array of Strings, it removes the text: "index":
nameText.split('index')
// Returns ['data[', '][`description or text or date`]']
Finally .join() will convert the Array of Strings into a String with the variable index number between them:
.join(index)
// Returns `'data['+index+'][`description or text or date`]'`
Add the following statement as the first line of the function:
let rows = $('.taskTable tr').length;
This will be the number of rows already in the table.
Add this after the row has been cloned but before it is appended:
lastTr.find('input').attr('name', 'data' + rows);
This finds the input nested within the new row and assign it name="data'+rows. I'm not sure what's with the [description] part of the name. Is it dynamic or literal like the [index] part. It sounds like something isn't quite right about those names...
Note: The rest of the name can be whatever, I just feel wrong to have a name looking like that. The contacted string will look like the following with the original text:
lastTr.find('input').attr('name', 'data[' + rows + '][description]');
Also, I added another function that will change all row input with the new naming pattern.
Demo
/*
This will change all row input names from
'data[index][description]'
'data[index][text]'
'data[index][date]'
to
'data['+index+'][description]'
'data['+index+'][text]'
'data['+index+'][date]'
index = 0,...N
*/
$('.addTask tr').each(function(index) {
$(this).find('input').each(function() {
let nameText = $(this).attr('name');
let newName = nameText.split('index').join(index);
$(this).attr('name', newName);
});
});
$(".addTask").on('click', function(index) {
let rows = $('.taskTable tr').length;
const lastTr = $('.taskTable').find('tr:last').clone();
lastTr.find('input').each(function() {
let nameText = $(this).attr('name');
let newName = nameText.split('index').join(rows);
$(this).attr('name', newName);
});
$('.taskTable').append(lastTr);
});
<table class='taskTable'>
<tr><td>
<input name='data[index][description]'>
<input name='data[index][text]'>
<input name='data[index][date]'>
</td></tr>
<tr><td>
<input name='data[index][description]'>
<input name='data[index][text]'>
<input name='data[index][date]'>
</td></tr>
</table>
<button class='addTask' type='button'>Add Row</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>