Estoy tratando de agregar un efecto de desplazamiento, similar a Netflix para cada género que se usa ( IEnumerable ), pero la función solo se ejecuta en el primero. Creo que sería necesario crear una lista de clases para js, pero como no la uso, no sé cómo se podría hacer.

cshtml:

 @foreach (var producer in Model.Item1) { bool found = false; @foreach (var teste in Model.Item2) { if (teste.ProducerId == producer.Id && found == false) { <div class="contain"> <div class="slider"> <div class="contain"> <script src="js/seriesindex.js"></script> <h3> <a asp-action="Details" asp-route-id="@producer.Id"> <img class="text-center" src="@Html.Raw(producer.IconUrl)" alt="" style="width: auto; height: 30px " /> </a> </h3> <span onmouseover="scrollEsquerda()" onmouseout="clearScroll()" class="handle handlePrev active"> <i class="fa fa-caret-left" aria-hidden="true"></i> </span> <span onmouseover="scrollDireita()" onmouseout="clearScroll()" class="handle handleNext active"> <i class="fa fa-caret-right" aria-hidden="true"></i> </span> <div id="scroller" class="row"> <div class="row__inner">

js

 var intervalo; function scrollDireita(){ intervalo = setInterval(function(){ document.getElementById('scroller').scrollLeft += 1 } , 5); }; function scrollEsquerda(){ intervalo = setInterval(function(){ document.getElementById('scroller').scrollLeft -= 1 } , 5); }; function clearScroll(){ clearInterval(intervalo); };