#やりたいこと
jQueryで、テーブルの行を追加、削除するというフォームを作成しています。
plusとminusのアイコンをクリックすることで、tableの行を追加する、削除する、という
動作を実現したいと思っています。

（問題点１）
以下のようなコードで、試しているのですが、
plusアイコンをクリックしたときに、すでにある行に日付がセットされている場合
空行ではなく、直前に選んだ日付があらかじめセットされた行が追加されます。

（問題点２）
日付けと数量の値がセットされている場合に、
日付けの修正ができません。
datepickerのカレンダーは表示されるのですが、このカレンダーで選びなおした日付に
修正することができません。

どこを修正したらよいでしょうか？

HTML
1<table>
2<tr>
3 <!-- 他のフォーム内の項目の行 -->
4</tr>
5<tr class="type_detail">
6　　<th>テーブル</th>
7    <td colspan="5">
8      <table class="table-form" id="t_detail">
9      <thead>
10      <tr>
11        <td>
12          <button name="plus" id="plus" type="button"><img src="img/icon_plus.png"></button>
13       </td>
14       <td>日付</td>
15       <td>数量</td>
16       <td>チェック</td>
17      </tr>
18      </thead>
19      <tbody>
20        <tr style="display:none;">
21          <td>
22            <button name="minus" class="minus" type="button"><img src="img/icon_minus.png"></button>
23          </td>
24          <td>
25          <input class="datepicker" style="width:20%;" type="text" name="t_date[]" data-order-status />
26          </td>
27          <td>
28          <input style="width:50%;" type="text" name="amount[]" /> 個
29          </td>
30          <td>
31          <input type="checkbox" name="t_check[]">
32          </td>
33       </tr>
34    </tbody>
35    </table>
36  </td>
37</tr>
38</table>
39<input type="submit" value="submit">

JS
1jQuery(function($) {
2 $("#plus").on("click", function() {
3  $("#t_detail tbody tr:first-child").clone(true).appendTo("#t_detail tbody");
4  $("#t_detail tbody tr:last-child").css("display", "table-row");
5 $(".minus").on("click", function() {
6  $(this).parent().parent().remove();
7 });
8 });
9});

行動規範の内容に同意します

回答1件

サンプル

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title>Sample</title>
6		<style type="text/css">
7			table {
8				border-collapse: collapse;
9			}
10			table th, table td {
11				border: 1px solid #CCC;
12			}
13		</style>
14	</head>
15	<body>
16		<table>
17			<thead>
18				<tr>
19					<th>
20						<button id="plus" type="button">+</button>
21					</th>
22					<th></th>
23					<th></th>
24					<th></th>
25				</tr>
26			</thead>
27			<tbody>
28				<tr>
29					<td>
30						<button class="minus" type="button">
31							-
32						</button>
33					</td>
34					<td>
35						<input class="datepicker" type="text" name="t_date[]" />
36					</td>
37					<td>
38						<input type="text" name="amount[]" /> 個
39					</td>
40					<td>
41						<input type="checkbox" name="t_check[]">
42					</td>
43				</tr>
44			</tbody>
45		</table>
46		<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
47		<script type="text/javascript">
48
49			function add_row() {
50				let row = $("table tbody tr:first").clone();
51				row.find('input:text').val('');
52				row.find('input:checkbox').prop('checked', false);
53				$("table tbody").append(row);
54			}
55
56			function del_row(element) {
57				// 最後の1行は削除しない
58				if ($("table tbody tr").length === 1) {
59					return;
60				}
61				element.remove();
62			}
63
64			$(function () {
65				$("#plus").on('click', function () {
66					add_row();
67				});
68				$("tbody").on('click', '.minus', function () {
69					let row = $(this).parents('tr');
70					del_row(row);
71				});
72			});
73		</script>
74	</body>
75</html>