The idea is that the resort has cabins numbered 1-4 and each cabin can be reserved from Saturday afternoon one week and checkout Saturday morning the following week. I want the default setting to be unavailable with the table row background being a light shade of red. I’m trying to figure out how to set up the code to have a clicked/active “Cabin 1” button show all of the table rows in which Cabin 1 was available. Then the same with the other Cabins.
So I figured that I’d have a css class “unavailable” [bg-color: red] as the first class then add “c1 c2 c3, etc” as placeholders to add an “available” class [bg-color: green] with javascript. If a table row has the class “c1” then I want the Cabin 1 button click, to add the class “available” and then a click anywhere else will first remove all “available” classes.
I’m pretty sure this can be done with javascript and I think this resource https://hype.codes/how-change-elements-class-javascript can help anyone who knows javascript. Reading javascript makes sense to me, but rearranging it to do custom tasks has never worked for me. Any help would be great.
Code here –
https://codepen.io/ryan-agrimson/pen/JzZYNe
