<form action="outof.php" method="post">

<!-- 押すとフォーム増えるボタン -->
  <button type="button" id="TableFuyashi">増える</button>

<!-- ボタン押されるとフォーム増えるテーブル -->
<table id="fueruTable">
	<tr>
		<th>見出し行</th>
		<th>フォーム</th>
	</tr>
</table>

<!-- 
増やしたテーブルをまとめてsubmit
<button type="submit" name="submit">増やした</button>
-->
<button type="button" name="submit">増やした</button>
  
<!-- </form> 新閉じタグ位置 -->

<!-- 画面上では非表示  増やす前のテンプレート -->
<div style="display:none;">
	<table id="templateTable">
		<tr class="fuyashiTr" data-no="QQQQ">
			<td class="fuyashiNumber">QQQQ</td>
			<td><input type="text" id="DataQQQQName" name="data[QQQQ][name]" /></td>
		<tr>
	</table>
</div>


</form><!-- 旧閉じタグ位置 -->

<!-- 略 -->

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
#fueruTable{
  border:1px solid;
}
	//テーブル行数を増やす
	$("#TableFuyashi").on('click',function(){
		//テンプレートのコピー
		var template=$(".fuyashiTr","#templateTable").clone();

		//行番号の取得
		var lastRowNo = $(".fuyashiTr:last","#fueruTable").attr('data-no')?($(".fuyashiTr:last","#fueruTable").attr('data-no')-0):0;//【1】
		var nextRowNo = lastRowNo+1;
		
		//テンプレート中のQQQQを次の行番号に置き換える諸々の作業
		$(template).attr('data-no',nextRowNo);

		$(".fuyashiNumber",template).html(nextRowNo);

		var fueru_input =$(":input",template);
		var fueru_input_id = fueru_input.attr('id');
		var fueru_input_name=fueru_input.attr('name');
		fueru_input
			.attr('id',fueru_input_id.replace('QQQQ',nextRowNo))
			.attr('name',fueru_input_name.replace('QQQQ',nextRowNo));

		//増えるテーブルに押し込み
		$("#fueruTable").append(template);
	});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.