dynamic id="errorMessage1" with incremental numbers?

Here is what I have:

  <form class="form-horizontal" method="POST" action="">
                    

                    @if (count($errors) > 0)
 @foreach ($errors->all() as $error)
    <div class="alert alert-danger" id="errorMessage1">
  
  </div>
   @endforeach
  @endif

and where I am adding the id= it is creating alot of

 <div class="alert alert-danger" id="errorMessage1">
 <div class="alert alert-danger" id="errorMessage1">
 <div class="alert alert-danger" id="errorMessage1">

when I am trying to set individual scripts to run for each error message, something like this...

 <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"> 
 </script>

 <script type="text/javascript">
   setTimeout(function(){
      $("#errorMessage1").fadeOut(2000);
   }, 3000);
   </script>

<script type="text/javascript">
    setTimeout(function(){
        $("#errorMessage2").fadeOut(2000);
}, 5000);
</script>

    <script type="text/javascript">
        setTimeout(function(){
            $("#errorMessage3").fadeOut(2000);
    }, 7000);
    </script>

See I have added the id="errorMessage1" id="errorMessage2" id="errorMessage3" but they have no effect because of the issues with above.

via Chebli Mohamed