Hotwire Discussion

Update multiple HTML elements wth same dom id via Turbo Stream

I can use Turbo Stream to update and delete HTML element with proper dom id as suggested by Turbo handbook. But there is a situation that a web page may have several HTML elements with the same dom id. For example, a list of todos may shows assignee’s name by them and several todos may have the same assignees. When that assignee is destroyed in Rails, it broadcasts via Turbo Stream but only the first one gets deleted. It is probably due to the use of getElementById() which only returns the first HTML element it finds. What’s the proper way to delete all HTML element with the same dom id ? I could broadcast the remove action multiple times, but it is not ieal.

One way to do so is to have turbo_stream_from for each element, but there will result in many turbo_stream_from tags in the same page. Will it affect the performance of page loading ?

You can have a response with multiple turbo stream tags in it. All the elements are then updated properly. I believe it should not affect performance but I don’t have enough information about it.