How to handle repetitive actions on bubble?

Hey Bubblers,

I am building an app that should allow people to buy tickets online for spectacles.

The issue I am having now is that the spectacle room has 220 seats and I should allow users to book any seat they want.

I created the seats and they look like this (a little different for mobile version)

Each seat has two custom states: one as text for the row and the number of the seat and the second custom state is the price for that seat.

Each seat which is already booked will show red color and not available for clicking while the seats you are booking will display a green color.

My problem is that it became quite annoying to manually set 2 custom states and 2 conditionals for each seat, for more than 220 seats for desktop version and again another 220 seats for mobile version.

There must be a smarter way to do this.
Any suggestions?

Yes. There is 100% a way to make this more dynamic.

yut017DB4b

I made this quick as an example. This is not built with Bubble but I could turn it into a custom component. Reason why we are using a custom component, is because Bubble itself cannot handle dynamic components like this in-house (or atleast is much harder to implement).