I encountered an issue where rows are created dynamically and I needed to add a div at the end of each row. Despite trying various methods, I faced difficulties as adding the div resulted in extra divs being added to all previous rows whenever a new row was inserted. My objective was to have just one cancel button assigned to each row for user ease.
In my current code, I am attempting to iterate through each row with the 'row' class and verify whether a child element with the class "cancel" exists. If not, I aim to append the cancel div. While this approach works initially, subsequent attempts fail to yield the desired outcome.
$('.row').each(function(){
if($(".row").children(".cancel").length == 0){
$("<div class = 'cancel'>test</div>").appendTo('.row')
}
})
An alternate solution I experimented with involved inserting the 'cancel' div within an else statement while appending rows:
if($(".table").html().length <= 0)
{
$('.table').append($("<table>").append(tableheader).append(tr));
}else{
if($(".table").html().length > 0){
$("table").append(tr).append("<div class = 'cancel'>test</div>")
}
}
However, the above method did not render the expected output at all.
Although one workaround could involve adding another td to the tr variable for creating a new column with the div, I am curious as to why my aforementioned approaches failed. They should have ideally worked. Kindly pardon any oversight on my part.
For better clarification, here is the jsfiddle link. It's possible that there might be an error in the code elsewhere.
An additional issue I am facing pertains to the total amount displayed in the total column. The figures are appearing as 7.5 instead of the standard dollar pricing format like 7.50. Moreover, calculating totals like selecting grilled chicken cutlet with a quantity of 3 results in 38.849999999999994 rather than the expected 38.85 even after using toFixed(2) and parseFloat. Any guidance you can provide on resolving this discrepancy would be greatly appreciated.