I'm trying to add a scroll effect, similar to Netflix for each genre that is being used (IEnumerable), but the function only runs in the first one. I believe that it would be necessary to create a list of classes for js, but since I don't use it, I don't know how it could be done.

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);
};