У меня есть div, и в этом div у меня есть форма, как два поля ввода с соответствующими идентификаторами, как показано ниже:
<html>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$(document).ready(function(){
$('#btn1').click(function(){
var $div = $('div[id^="div"]:last');
var num = parseInt( $div.prop("id").match(/\d+/g), 10 ) +1;
var $klon = $div.clone().prop('id', 'div'+num );
$div.after( $klon);
});
});
</script>
<body>
<button type = "button" id = "btn1" >submit </button>
<div id = "div1">
<h4><b>Trace 1 </b></h4>
<form>
<table>
<tbody>
<tr>
<td><label>X Axis: </label></td>
<td><input type="text" name="t1_x_axis" id="t1_x_axis" size="50"></td>
</tr>
<tr>
<td><label>Y Axis: </label></td>
<td><input type="text" name="t1_y_axis" id="t1_y_axis" size="50"></td>
</tr>
</tbody>
</table>
</form>
</div>
</body>
</html>
Здесь мой запрос, когда нажимаете кнопкуМне нужно отобразить это div вместе с формой. Сколько раз я нажимаю эту кнопку, сколько раз div будет отображаться один за другим с различным идентификатором в div и двумя идентификаторами полей ввода также должны измениться.
Например, если я нажму кнопку 5 раз, она должна отобразиться 5 раз, а эти div идентификатор и идентификатор поля должны отличаться
Ожидаемый результат:
Trace 1
X axis:
Y axis:
Trace 1
X axis:
Y axis:
Trace 1
X axis:
Y axis:
Trace 1
X axis:
Y axis:
Trace 1
X axis:
Y axis: