Как добавить строку в конец таблицы через JS?

Question

[ТемноКот]

Доброго времени суток, уважаемые!
Имеется таблица со строками и кнопкой "+строка"

<tr>
	<td><input type="text" name="id[1]" value="1" class="form-control"></td>
	<td><input type="text" name="name[1]" value="Блок 1" class="form-control"></td>
	<td><input type="text" name="price[1]" value="10000" class="form-control"></td>
	<td><button data-line="1" type="button" class="btn btn-outline-danger btn-del" onclick="remove_row(this); return false;">del</button></td>
  </tr>

  <caption><button type="button" id="plus" class="btn btn-sm btn-outline-secondary mt-3">+строка</button></caption>

Нужно в конец добавить строку с заполненным из переменной первым полем и остальными пустыми полями. То есть, что-то такое:
let rowID = 12;

<td><input type="text" name="id[12]" value="12" class="form-control"></td>
	<td><input type="text" name="name[12]" value="" class="form-control"></td>
	<td><input type="text" name="price[12]" value="" class="form-control"></td>
	<td><button data-line="1" type="button" class="btn btn-outline-danger btn-del" onclick="remove_row(this); return false;">del</button></td>

Не могу сообразить как это сделать, чтобы не прописывать каждый инпут отдельно. Наваял чёрте чё...

$('#plus').click(function() {
		let rowID = 12;
		$("table tbody tr:first").clone().find("input").each(function() {
			$(this).attr('name', 'id['+rowID+']').val('');
		}).end().appendTo("table");
	});

и разумеется оно не работает. Даже с первым инпутом (хотя по идее уж его то должно менять).
Подскажите, плиз!

Пример на codepen https://codepen.io/akira13w/pen/dyegVBe

Answer 1

[Bikishov Dmitry]

Попробуй сделать проверку на index

$('#plus').click(function() {
		let rowID = 12;
		$("table tbody tr:first").clone().find("input").each(function(index) {
      if(index === 0) {
			  $(this).attr('name', 'id['+rowID+']').val(rowID);
      } else {
        $(this).attr('name', 'id['+rowID+']').val('');
      }
		}).end().appendTo("table");
	});

Comments

[ТемноКот]

Не помогает. То есть, визуально оно работает, браузер отображает как надо, но вот "Инструментах разработчика" видно, что val(''); нифига не меняется.

Ну и, соответственно, при отправке данных через форму передаются старые значения, что ты не вводи.
Бред какой то, блин. О_О