Multiple elements update

[agmadt]

PROBLEM

I have two button with same class, when any of the button is clicked, response from the server would be the same button but different text.
Imagine a Follow and Unfollow button, but I have those button on top and bottom of the page.

I have reproduce it here: https://codepen.io/agmadt/pen/PoXzVzB

Client

<button class="follow-button" hx-get="/follow-me" hx-swap="outerHTML" 
	hx-target=".follow-button"
>Follow Me</button>
<button class="follow-button">Follow Us</button>

Server

server.respondWith("GET", "/follow-me", function(xhr){
  xhr.respond(200,  {}, "<button class='follow-button active'>Just Follow</button>")
})

However, it will only update the first button.

I have figured that the only way to solve this is using hx-swap-oob, but it will make template harder to read.

Solved code

Client

<button class="follow-button-1" hx-get="/follow-us" 
	hx-swap="outerHTML">Follow My Facebook</button>
<button class="follow-button-2">Follow My LinkedIn</button>
<button class="follow-button-3">Follow My Instagram</button>

Server

server.respondWith("GET", "/follow-us", function(xhr){
  xhr.respond(200,  {}, `
  <button class='follow-button active follow-button-1'>Just Follow Me</button>
  <button class='follow-button active follow-button-2' hx-swap-oob='true:.follow-button-2'>Just Follow Me</button>
  <button class='follow-button active follow-button-3' hx-swap-oob='true:.follow-button-3'>Just Follow Me</button>`)
})

Is it intended or am I missing something?

Thanks

[agmadt]

I am ashamed, the answer is here: #893