I am having trouble cloning two label fields and their respective text fields after the div id/class that contains them when using a button. The cloned elements are currently being appended above, but I want them to appear below. I have tried using both the append and afterThis plugins from JQuery. Please take a look at this: Demo: JSFiddle
Any help would be greatly appreciated. Thank you!
$(function() {
$("#cloneadd").click(function() {
var clone ='<tr id="e00">';
clone +='<td colspan=1><label>Amount :</label></td>';
clone +='<td colspan=1><label>Detail :</label></td>' ;
clone +='</tr>';
clone +='<tr id="e01">';
clone +='<td colspan=1 id="opt_1"><input type="text" name="amt_exp" onkeypress="return isNum(event)" placeholder="Amount"/></td>';
clone +='<td colspan=1 id="opt_2"><input type="text" name="det_exp" placeholder="Detail"/></td>';
clone +='</tr>';
/*$("#expopt").append($(clone));*/
$(clone).insertAfter( "#expopt" );
});
});<form action="xyz">
<table>
<tr>
<td colspan=2>
<label>Annual Amount :</label>
</td>
</tr>
<tr>
<td colspan=2>
<input type="text" name="ann_amo" onkeypress="return isNum(event)" placeholder="Enter Amount" required />
</td>
</tr>
<tr>
<td colspan=2>
<label>Info :</label>
</td>
</tr>
<tr>
<td colspan=2>
<input type="text" name="ann_inf" placeholder="Enter Details" required />
</td>
</tr>
<div id="expopt">
<tr id="e00">
<td colspan=1>
<label>Amount :</label>
</td>
<td colspan=1>
<label>Detail :</label>
</td>
</tr>
<tr id="e01">
<td colspan=1 id="opt_1">
<input type="text" name="amt_exp" onkeypress="returnisNum(event)"/>
</td>
<td colspan=1 id="opt_2">
<input type="text" name="det_exp" placeholder="Detail" />
</td>
</tr>
</div>
<tr>
<td colspan=2>
<input type="button" id="cloneadd" value="ADD"/>
</td>
</tr>
<tr>
<td colspan=2>
<input type="submit" name="submit" value="Submit" />
</td>
</tr>
</table>
</form>