Multiple of the same Javascript instances on one page

I’m building a scroller site and needed a couple of range sliders to the page. I found this solution:

Live site: https://rangeslider.webflow.io/

Webflow link: weblfow-custom-range-slider - Webflow

It uses css and js custom code and works perfectly for one instance, but I need to add another on the page, however, when I add the “form-fill” id it doesn’t show up.

The author states: “The class “form-field” represents the slider
The ID of the form field is what gives it its slider, so make sure that matches up
All styling and JS can be found in the page custom code sections, including any custom colors”

I have limited knowledge of JS but I’m assuming this is because it’s in conflict with the first instance.

What’s the best way to go about adding multiple instances of this JS form on one page?


Here is my site Read-Only: https://preview.webflow.com/preview/samesidedev4?utm_medium=preview_link&utm_source=designer&utm_content=samesidedev4&preview=f8968bed8a87968b487b09e7cfdcf038&pageId=62864ff1335ea3284db20958&workflow=preview