How to make two identical sliders work on the same page?

Question

JavaScript

Guess I have a super easy question, but still, didn't google the answer.

There are two sliders on the page. How to make both work? When I move the first one, its value changes, but when I move the second one, the value remains in place.

Code provided:

Answer 1

You have several elements on the page with the same ID. With the help of getElementById(), the first one that comes across is taken. In your case, only the first sum_text and the first sum. The listener, therefore, is hung up only on it and the text only changes in the first sum_text.
The way out is to use a method that returns a collection of nodes, for example, querySelectorAll, hang a listener on each input in a loop, and use the unique ID of nodes with text to assign the desired text to the desired block.