как динамически сделать более одного загрузочного слайдера карусели на одной странице

Я создаю более одного слайдера динамически, используя php, но кнопка prev или next работает только в первом слайдере, а не в слайдере rest из-за наличия одного и того же класса в управлении, другие не работают. Пожалуйста, помогите мне исправить это.
вот мой код слайдера с php

if($counter == 0)
{
//$image_path='<div class="panel-body" style="background-image: url('.$rowu['event_image'].');>';
$Indicators ='<li data-target="#carousel-example-generic" data-slide-to="'.$counter.'"  class="active"></li>';
$slides = '<div class="item active" >
<div class="container-fluid" style="marign:0px;padding:0px; background-image: url('.$rowu['event_image'].');">
<div class="highlighted">'.$event_category.'</div>
<div class="highlighted">'.$event_city.'</div>
<div class="highlighted">'.date_format($startDate,'d F').'</div>
<div class="pull-right" style="margin-top:270px">
<a href="event.html" class="btn btn-primary">Book</a>
</div>
</div>
</div>';

}
else{
//$image_path .='<div class="panel-body" style="background-image: url('.$rowu['event_image'].');>';
$Indicators .='<li data-target="#carousel-example-generic" data-slide-to="'.$counter.'"></li>';
$slides .= '<div class="item">
<div class="container-fluid" style="marign:0px;padding:0px; background-image: url('.$rowu['event_image'].');">
<div class="highlighted">'.$event_category.'</div>
<div class="highlighted">'.$event_city.'</div>
<div class="highlighted">'.date_format($startDate,'d F').'</div>
<div class="pull-right" style="margin-top:270px">
<a href="event.html" class="btn btn-primary">Book</a>
</div>
</div>
</div>';

}
$counter++;
}

echo '
<div class="panel panel-default"  style="font-family: Futura,Trebuchet MS,Arial,sans-serif;">
<!-- panel body where slider will work -->
<div class="panel-body">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
'.$Indicators.'
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner">
'.$slides.'
</div>

<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>

`