Duplicating DOM elements with before and after turbo streams actions

[ExceLLent404]

The problem is similar to what #240 solved for append and prepend actions. But not for before and after actions.

Streams reference for append action says:

If the template’s first element has an id that is already used by a direct child inside the container targeted by dom_id, it is replaced instead of appended.

The same for prepend.

However, the described behavior does not apply to the before and after actions.

The problem:

Assuming there is the following HTML

<div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>

then such turbo stream element with before action

<turbo-stream action="before" target="bottom">
  <template>
      <div id="middle"></div>
  </template>
</turbo-stream>

or with after action

<turbo-stream action="after" target="top">
  <template>
      <div id="middle"></div>
  </template>
</turbo-stream>

will produce DOM with elements with duplicated id

<div id="top"></div>
<div id="middle"></div>
<div id="middle"></div>
<div id="bottom"></div>