appending html form to responsive .child td

bedede

Hello,

I have a requirement firstly to have the responsive accordion always available not just at certain breakpoints. As want to have extra info and a form, the form is to edit the row of data and submit.

I can append the form to any row or td other than those of class="child". This row is dynamically created so was thinking that the jquery was trying to find the html before it was created. So I set the call in a timeOut but still no success, again it will work for any existing html but not on any newly created html.

I have other related mark-up issues, where I am trying to manipulate content after it loaded on the page, been on Slack etc to find answers. Perhaps this is not a specific Datatable.js issue but a general failing of my understanding on how to select newly created page elements with Jquery. As if Jquery is not listening to updates to the dom, as the page is not reloading.

Been at this problem for hours, learnt a lot but still no fix.

$("#openRequests tr:not(:first),#approvedRequests tr:not(:first)" ).each(function() {  
           $(this).find("td:first-child").one("click",function(){

              setTimeout(function (){
 
                    var activityAmendFormOuter = '<td class="activity-amend-form-td">' + $('.activity-amend-form').html() + '</td>';
                        
                    $(this).parent("tr").siblings("tr.child").find("td.child").append(activityAmendFormOuter);

              }, 5000); 
            });
        });