Add to / Remove from List Button

I have two pages, a product list and a project list page.

I have a little form for each product in the product list that lets me add or remove the product from the project list (Project is a separate model where I add/remove the entries). The text for the submit button is decided during rendering based on wether the product is in the project or not (so it’s either “Add to project” or “Remove from project”).

This all works, however what I want is for the text in the button to change when it is pressed. Because at the moment it only refreshes once I reload the product page. How can I do this?

I have this in my routes:

post "products", to: "project#toggle"

Would this be helpful? javascript - Change innerHTML on button click - Stack Overflow