jQuery execute more than once on page, each(function()?

JavaScript
1

Hi, I have the below code which I believe basically says

if the div with id=“sectionavailability” equals “in stock” replace with SOME HTML or if it has “out of stock” replace with SOME OTHER HTML

Works great, but only executes once on a page, the first occurance of id=“sectionavailability”


		if(jQuery("#sectionavailability").length){
		if(jQuery("#sectionavailability").text().toLowerCase() === "in stock"){
			jQuery("#sectionavailability").html("SOME HTML CODE HERE");
		}
		else if(jQuery("#sectionavailability").text().toLowerCase() === "out of stock"){
			jQuery("#sectionavailability").html("SOME OTHER HTML CODE HERE");
		}
	}

The problem is, I need this to execute on a product category page which will list an array of many products and id=“sectionavailability” will occur many times.

How does the above code need to be altered to have it execute more than once on a page, whenever id=“sectionavailability” is found?

I know perhaps this is involved each(function() ? But I have no idea how to alter the code to include it…

Can someone help make the above if statement work more than once on a page please?

Thanks!

2

"id"s should be unique on the page.
perhaps you should move the “sectionavailability” into the class attribute instead.

3

In addition to switching it to a class tag, as stated above

jQuery('.TheClassTag').each(function() {
     if(jQuery('.TheClassTag').length){
		if(jQuery('.TheClassTag').text().toLowerCase() === "in stock"){
			jQuery('.TheClassTag').html("SOME HTML CODE HERE");
		}
		else if(jQuery('.TheClassTag').text().toLowerCase() === "out of stock"){
			jQuery('.TheClassTag').html("SOME OTHER HTML CODE HERE");
		}
	}
})

Should work