раскрывающийся текст в foreach

[Zadov]

                <?php foreach ( $array as $key => $val ) { ?>
                <tr>
                        <td width="250">
                                <a href="" class="btn-slide"><?php echo $val['descr'] ?></a>
                        </td>
                        <td>
                                <?php echo $val['price'] ?>
                        </td>
                        <td><?php $id = $val['id']; ?>
                                <div id="panel"><?php echo nl2br(shell_exec("cat /var/www/html/price/msk/$id")) ?></div>
                        </td>
                </tr>
                <?php } ?>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>


<style type="text/css">
#panel {
height: 200px;
width: 400px;
padding: 5px;
display: none;
}
.btn-slide {
}
.active {

}
</style>



<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>

В этом коде <div id="panel"><?php echo nl2br(shell_exec("cat /var/www/html/price/msk/$id")) ?></div> срабатывает только при обработке первого массива. Как я понимаю, для каждого массива нужен свой уникальный id, но как это реализовать?

 

[WMix]

<a href="" class="btn-slide" data-panel="#panel-<?= $val['id'] ?>"><?= $val['descr'] ?></a>
<div id="panel-<?= $val['id'] ?>"><?= nl2br(file_get_contents('/var/www/html/price/msk/'.$id)) ?></div>


$(".btn-slide").click(function(){
  $(this.data('panel')).slideToggle("slow");
  $(this).toggleClass("active"); return false;
});

 

[Zadov]

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>


<style type="text/css">
#panel {
height: 200px;
width: 400px;
padding: 5px;
display: none;
}
.btn-slide {
}
.active {

}
</style>


<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
        $(this.data('panel')).slideToggle("slow");
        $(this).toggleClass("active"); return false;
});
});
</script>



                        <td width="250"><?php $id = $val['id']; ?>
                                <a href="" class="btn-slide" data-panel="#panel-<?= $id ?>"><?php echo $val['descr'] ?></a>
                                <div id="panel-<?= $id ?>"><?= nl2br(file_get_contents('/var/www/html/price/msk/'.$id)) ?></div>

                        </td>

Не срабатывает js

 

[WMix]

https://habrahabr.ru/post/76485/