I have this code that displayes the products alongside their price. The problem is that every time I go back and forward the price is added again. project itself is created through .js files so the url code doesn's change if that information helps.
function(val) {
var products = $('#products');
var children = products.children('#productsUserInputs').children();
for (var i = 0; i < children.length; i++) {
var current = children[i];
var currentId = $(current).attr('id').toLowerCase();
var result = val.map(a => (a.Product + 'wrapper').toLowerCase());
var productName = currentId.replace('wrapper', '');
var foundProduct = val.find(e => e.Product.toLowerCase() === productName);
if (foundProduct) {
var price = foundProduct.Price;
var priceDisplay = document.createElement("div");
var priceId = priceDisplay.setAttribute('id', 'price');
priceDisplay.append(price);
current.appendChild(priceDisplay);
var getprice = document.getElementById('price');
if (getprice > 1) {
priceDisplay.setAttribute("class", "hidden");
} else {
priceDisplay.setAttribute("class", "display-price");
}
}
if (result.includes(currentId)) {
$(current).attr("hidden", false);
} else {
$(current).attr("hidden", true);
}
if (result.includes(!priceDisplay)) {
$(priceDisplay).attr("hidden", true);
} else {
$(priceDisplay).attr("hidden", false);
}
}
}