Eval for More Range Sliders

When a user adds an asset to a group, I need to create a new range slider for that asset. Currently, I have a big if statement that allows for the creation of up to 20 sliders. Here's a snippet:

else if (assetnum ==2) {
  const basicExample2 = document.querySelector('.multi-ranges-start-values-2');
  const oneRangeValueBasic2 = document.querySelector('#multi-ranges-start-values-show-2');
  const basicExampleInit2 = new mdb.MultiRangeSlider(basicExample2, { tooltips: true, startValues: [0, 100] });
  basicExample2.addEventListener('value.mdb.multiRangeSlider', (e) => {
  const [first, second] = e.values.rounded;
  document.getElementById(lid).value = first;
  document.getElementById(uid).value = second;
  });

I repeat this "else if" 20 times. I'd rather replace it with a more concise piece of code. Consequently, I tried the following:

  eval("const basicExample" + assetnum.toString() + " = document.querySelector('.multi-ranges-start-values-" + assetnum.toString() + "');");
  eval("const oneRangeValueBasic" + assetnum.toString() + " = document.querySelector('#multi-ranges-start-values-show-" + assetnum.toString() + "');");
  eval("const basicExampleInit" + assetnum.toString() + " = new mdb.MultiRangeSlider(basicExample" + assetnum.toString() + ", { tooltips: true, startValues: [0, 100] });");
  eval("basicExample" + assetnum.toString() + ".addEventListener('value.mdb.multiRangeSlider', (e) => {const [first, second] = e.values.rounded; document.getElementById(lid).value = first; document.getElementById(uid).value = second;})");

Unfortunately, this doesn't work. If I replace the first eval with the explicit code, the rest seems to execute fine. I've verified that the resulting string in the eval does indeed match the explicit version. Is there a reason why eval won't work in this case? Are there any alternatives I should consider to be able to add many range-sliders to a page?

Thank you in advance -