How to append an element to a dynamically generated element

Question

I have several forms one clone after another depends on the user input. in each form I have button to add a row of input:

<h4>3.3.5 Input Parameters</h4>
<table id="input_param" data-role="table" class="ui-responsive table-stroke">
    <thead>
        <tr>
            <th data-priority="1">Parameter</th>
            <th data-priority="2">Data Type</th>
            <th data-priority="3">Required</th>
            <th data-priority="4">Brief description</th>
            <th data-priority="5">Location in Request</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>     
<input type="button" id="add_input_param" value="+ Add Input Parameter" data-inline="true" /><br />

so if it's the first form(static form) than this code will work:

$("#add_input_param").click(function() {
    var maincontent = loadParam('IP', '01', ipCount);
    ipCount++;
    $('#input_param').append(maincontent).trigger("create");
});

because the one after the first one I understand I have to use .on()

$("#input_form").on("click", "#add_input_param", function() {
    var maincontent = loadParam('IP', '01', ipCount);
    ipCount++;
   //$('this').append(maincontent).trigger("create");

});

the comment area is the part that I cannot get it work. I would like to append the maincontent to #input_param (it's a table), but because it's dynamically generated how can I modify that line of code so it will work with it?

maincontent will be something like this:

function loadParam(IO, form_number, counter) {
    var id = IO + form_number + '-' + counter;
    var maincontent = '<tr>';
    maincontent += '<th><input type="text" name="param' + id + '" id="param' + id + '" value="" /></th>';
    maincontent += '<td><input type="text" name="data_type' + id + '" id="data_type' + id + '" /></td>';
    maincontent += '<td>';
    maincontent += '<select id="required" name="req' + id + '" id="req' + id + '"class="form-alpha">';
    maincontent += '<option value="Mandatory" >Mandatory</option>';
    maincontent += '<option value="Optional" >Optional</option>';
    maincontent += '<option value="Conditional" >Conditional</option>';
    maincontent += '</select>';
    maincontent += '</td>';
    maincontent += '<td><textarea name="des' + id + '" id="des' + id + '" ></textarea></td>';
    maincontent += '<td>';
    maincontent += '<select name="location' + id + '" id="location' + id + '" class="form-alpha">';
    maincontent += '<option value="Header" >Header</option>';
    maincontent += '<option value="Body" >Body</option>';
    maincontent += '<option value="Query_param" >Query Parameter</option>';
    maincontent += '<option value="Resource_uri" >Resource URI</option>';
    maincontent += '</select>';
    maincontent += '</td>';
    maincontent += '</tr>';
    return maincontent;
}

Answer 1

Can't you just do it the same way as before?

$('#input_param').append(maincontent).trigger("create");

Also since you have a thead and tbody it's safer to target the correct element (thead or tbody) directly.

$('#input_param > tbody').append(...);