I am using tailwind and react and nextjs to create a website. I am trying to utilize the check radio button trick to have a website display different content without javascript. I want to make the data structure easy to manage so I thought of using an array of objects like [{name: string, content: string}, … ]. This is part of the tailwind documentation I was following: differentiating peers

I thought I could just replace the

class="peer/draft"

with

className={`peer/${item.name}`}`

given that it is wrapped inside array.map((item) => { … }).

This is part of the tailwind documentation I was following: differentiating peers

If loaded inside a browser and copy and pasted inside export default function page(), it works.
I am sure this is not the prettiest way to do things so if this is not recommended please tell me more!

This is my code including a data example:

export default function page() {
    const jobs = [
        {
            name: "walker",
            id: "wlk",
            conditions: "20 an hour",
            content: "walk and walk"
        },
        {
            name: "sitter",
            id: "sit",
            conditions: "20 an hour",
            content: "sit and sit"
        },
    ]

    return (
        <section id="careerHome">
            <div className="container grid md:grid-cols-2">
                {jobs.map((item) => {
                    return (
                        <div
                            key={item.id}
                            className="shadow-lg p-10 text-center capitalize flex-1 mt-6 rounded-md flex flex-col relative"
                        >
                            <h3>
                                {item.name}
                            </h3>
                            <input id={item.id} className={`peer/${item.id}`} type="radio" name={item.id} />
                            <b className="text-start">Learn More</b>
                            <div className="h-4"></div>
                            <input id={`${item.id}Close`} className={`peer/${item.id}Close`} type="radio" name={item.id} />
                            <b className="text-start">Close</b>
                            <div className={`hidden peer-checked/${item.id}:block absolute top-20 right-[10%]`}>
                                <p>{item.conditions}</p>
                            </div>
                            <div className={`hidden peer-checked/${item.id}:block`}>
                                <p>{item.content}</p>
                            </div>
                        </div>
                    )
                })}
            </div>
        </section>
    )
}

It is supposed to have two buttons for each block, one for opening and one for closing.