Append empty table rows to a table <p>I output a table when the user selects something. I have a button that will allow the user to append an empty table row to the end of the table but I can't seem to get it working properly.</p> <p>HTML generation code in PHP:</p> <pre><code>echo&lt;table&gt; "&lt;table id='roof-component-data-table'&gt;&lt;tbody&gt; &lt;tr&gt; &lt;th&gt;Roof Component&lt;/th&gt; &lt;th&gt;Delete&lt;/th&gt; &lt;/tr&gt;";tr&gt; &lt;tr id="roofComponentRow" style="display: none;"&gt; //empty row used to clone&lt;td&gt;&lt;input type="text" id="roof-component-name" name="roof-component-name[]" value="" &lt;="" td=""&gt;&lt;/td&gt; echo&lt;/tr&gt; "&lt;tr id='roofComponentRow' style='display: none;'&gt;"; &lt;tr id="roofComponentRow0"&gt; echo "&lt;td&gt;&lt;input type='text' id='roof &lt;td&gt;&lt;input type="text" id="roof-component-name'name" name='roofname="roof-component-name[]'name[]" value=''&lt;value="Air Film" &lt;="" td=""&gt;&lt;/td&gt;";td&gt; echo "&lt; &lt;td&gt;&lt;a href="#" class="removeRoofComponentRow" onclick="removeRoofComponent("Air Film")"&gt;Delete&lt;/tr&gt;";a&gt;&lt;/td&gt; &lt;/tr&gt; while&lt;tr ($roofComponentsRowid="roofComponentRow1"&gt; = mysqli_fetch_array($roofComponentsData)) { &lt;td&gt;&lt;input type="text" id="roof-component-name" name="roof-component-name[]" value="Surfacing" &lt;="" td=""&gt;&lt;/td&gt; echo&lt;td&gt;&lt;a "&lt;trhref="#" id='roofComponentRow".class="removeRoofComponentRow" $ComponentRowCounteronclick="removeRoofComponent("Surfacing")"&gt;Delete&lt;/a&gt;&lt;/td&gt; ."'&gt;"; &lt;/tr&gt; &lt;tr id="roofComponentRow2"&gt; echo "&lt;td&gt;&lt;input type='text' id='roof &lt;td&gt;&lt;input type="text" id="roof-component-name'name" name='roofname="roof-component-name[]'name[]" value='".value="Membranes" $roofComponentsRow['roof_component_name']&lt;="" ."'&lt;td=""&gt;&lt;/td&gt;";td&gt; echo "&lt;td&gt;&lt;a&lt;td&gt;&lt;a href='#'href="#" class='removeRoofComponentRow'class="removeRoofComponentRow" onClick='removeRoofComponentonclick="removeRoofComponent(\"{$roofComponentsRow['roof_component_name']}\""Membranes")'&gt;Delete&lt;"&gt;Delete&lt;/a&gt;&lt;/td&gt;";td&gt; &lt;/tr&gt; echo&lt;tr "&lt;id="roofComponentRow3"&gt; &lt;td&gt;&lt;input type="text" id="roof-component-name" name="roof-component-name[]" value="Overlay Boards" &lt;="" td=""&gt;&lt;/tr&gt;";td&gt; &lt;td&gt;&lt;a href="#" class="removeRoofComponentRow" onclick="removeRoofComponent("Overlay Boards")"&gt;Delete&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; $ComponentRowCounter++; &lt;tr id="roofComponentRow4"&gt; } &lt;td&gt;&lt;input type="text" id="roof-component-name" name="roof-component-name[]" value="Insulation" &lt;="" td=""&gt;&lt;/td&gt; echo "&lt; &lt;td&gt;&lt;a href="#" class="removeRoofComponentRow" onclick="removeRoofComponent("Insulation")"&gt;Delete&lt;/table&gt;";a&gt;&lt;/td&gt; &lt;/tr&gt; echo"&lt;input type='button' value='+' id='addRoofComponentRow' class='addRoofComponentRow'&lt;/&gt;";tbody&gt; &lt;/table&gt; &lt;input type="button" value="+" id="addRoofComponentRow" class="addRoofComponentRow"&gt; </code></pre> <p>This is what my table looks like:</p> <pre><code>&lt;table&gt; &lt;tbody&gt; &lt;tr&gt; &lt;th&gt;Roof Component&lt;/th&gt; &lt;th&gt;Delete&lt;/th&gt; &lt;/tr&gt; &lt;tr id="roofComponentRow" style="display: none;"&gt; &lt;td&gt;&lt;input type="text" id="roof-component-name" name="roof-component-name[]" value="" &lt;="" td=""&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr id="roofComponentRow0"&gt; &lt;td&gt;&lt;input type="text" id="roof-component-name" name="roof-component-name[]" value="Air Film" &lt;="" td=""&gt;&lt;/td&gt; &lt;td&gt;&lt;a href="#" class="removeRoofComponentRow" onclick="removeRoofComponent("Air Film")"&gt;Delete&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr id="roofComponentRow1"&gt; &lt;td&gt;&lt;input type="text" id="roof-component-name" name="roof-component-name[]" value="Surfacing" &lt;="" td=""&gt;&lt;/td&gt; &lt;td&gt;&lt;a href="#" class="removeRoofComponentRow" onclick="removeRoofComponent("Surfacing")"&gt;Delete&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr id="roofComponentRow2"&gt; &lt;td&gt;&lt;input type="text" id="roof-component-name" name="roof-component-name[]" value="Membranes" &lt;="" td=""&gt;&lt;/td&gt; &lt;td&gt;&lt;a href="#" class="removeRoofComponentRow" onclick="removeRoofComponent("Membranes")"&gt;Delete&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr id="roofComponentRow3"&gt; &lt;td&gt;&lt;input type="text" id="roof-component-name" name="roof-component-name[]" value="Overlay Boards" &lt;="" td=""&gt;&lt;/td&gt; &lt;td&gt;&lt;a href="#" class="removeRoofComponentRow" onclick="removeRoofComponent("Overlay Boards")"&gt;Delete&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr id="roofComponentRow4"&gt; &lt;td&gt;&lt;input type="text" id="roof-component-name" name="roof-component-name[]" value="Insulation" &lt;="" td=""&gt;&lt;/td&gt; &lt;td&gt;&lt;a href="#" class="removeRoofComponentRow" onclick="removeRoofComponent("Insulation")"&gt;Delete&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;input type="button" value="+" id="addRoofComponentRow" class="addRoofComponentRow"&gt; </code></pre> <p>Now when the user clicks the <code>+</code> button it will fire off some JS that should clone my empty row and append it to the end of the table.</p> <p>Here is how I am attempting to do that:</p> <pre><code>$(function() { var $removeIDValue = 0; $(document.body).on('click', '.addRoofComponentRow', function () { var $emptyRoofComponentRow = $("#roofComponentRow").clone(); $removeIDValue++ var $emptyRoofComponentRowClone = $emptyRoofComponentRow.clone(); var $newRowID = 'added_roof_component_row' + $removeIDValue; $emptyRoofComponentRowClone.attr('id', $newRowID) $emptyRoofComponentRowClone.children('td').last().after('&lt;td&gt;&lt;a href="#" class="removeRow" data-remove-row="' + $newRowID + '"&gt;Delete&lt;/a&gt;&lt;/td&gt;'); $('#roof-component-data-table').append($emptyRoofComponentRowClone); $emptyRoofComponentRowClone.show(); }); }); </code></pre> <p>When I click the button nothing is happening at all, I see nothing being added onto the table and I am getting no console errors at all. I also set an alert with that function to see if the function was even firing and my alert message did get displayed.</p> <p><a href="https://jsfiddle.net/dr1g02go/" rel="nofollow">JSFiddle</a></p> <p>Where am I going wrong here?</p>