I have a question regarding my node application that uses express. I have a view function that generates a list of inactive companies, with each company having two submit input types: "Active" and "Delete". My goal is to be able to click on the submit button and hide only that particular ul element. Unfortunately, I've been struggling to iterate over each element individually without hiding all of them at once. Here's the code snippet for my view function:
function generateInactiveCompany(companyObject) {
return `
<ul class="companyinfo">
<li class="list-info">${companyObject.company_type}</li>
<li class="list-info">${companyObject.company_name}</li>
<li class="list-info">${companyObject.company_location}</li>
<li class="list-info">${companyObject.company_phone}</li>
<br>
<li class="list-buttons">
<form action="/activeList" method="POST" class="myform">
<input type="hidden" name="companyId" value="${companyObject.id}">
<input type="submit" value="Active">
</form>
<form action="/deletecompany" method="POST">
<input type="hidden" name="companyId" value="${companyObject.id}">
<input type="submit" value="Delete">
</form>
</li>
<br>
</ul>
`
}
function generateInactiveCompanyList(arrayOfCompanies){
const companyItems = arrayOfCompanies.map(generateInactiveCompany).join('');
return `
<div class="list inactive-list">
${companyItems}
</div>
`
}
module.exports = generateInactiveCompanyList;
I have tried using jQuery to target and hide individual ul elements upon form submission, but it currently hides all of them simultaneously:
$(document.body).submit(function() {
$('.companyinfo').each(function(i) {
$(this).hide();
})
})
I have been stuck on this issue for quite some time and would highly appreciate any assistance. Thank you!