Php 如何在forEach循环中隐藏/显示更多文本

我的代码是：

<?php 
$msgArray = [
0=>'HTTP means HyperText Transfer Protocol.',
1=>'HTTPS,Hyper Text Transfer Protocol Secure is the secure version of HTTP.'
];
foreach ($msgArray as $key => $msg) :
$small = substr($msg, 0, 5);?>
<span class="lessText"><?= $small ?></span>     
<span class="fullText" style="display: none"><?= $msg ?></span> 

<sub class="viewMore" style="color:#3399ff;padding-left2%;cursor: pointer;">view more >></sub>
<sub class="viewLess" style="color:#3399ff;padding-left2%;cursor: pointer;display: none"><< view less</sub>
<?php endforeach; ?>   

<script type="text/javascript">
$(".viewMore").click(function(){
$(".viewMore").hide();
$(".lessText").hide();
$(".fullText").show();
$(".viewLess").show();
});

$(".viewLess").click(function(){
$(".viewLess").hide();
$(".fullText").hide();
$(".lessText").show();
$(".viewMore").show();
});
</script>

查看更多>>
将HTML片段包装在容器中

<div class="container">
    <span class="lessText"><?= $small ?></span>     
    <span class="fullText" style="display: none"><?= $msg ?></span> 

    <sub class="viewMore" style="color:#3399ff;padding-left2%;cursor: pointer;">view more >></sub>
    <sub class="viewLess" style="color:#3399ff;padding-left2%;cursor: pointer;display: none"><< view less</sub>
</div>

用以下结构编写：

<?php foreach(): ?>
<div class="holder">
 <div class="lessText"></div>
 <div class="fullText"></div>

 <div class="viewMore"></div>
 <div class="viewLess"></div>
</div>
<?php endforeach; ?>

<?php foreach(): ?>
<div class="holder">
 <div class="lessText"></div>
 <div class="fullText"></div>

 <div class="viewMore"></div>
 <div class="viewLess"></div>
</div>
<?php endforeach; ?>

$('.holder .viewMore').click(function(){
  $(this).closest('.holder').find('.lessText').hide();
  $(this).closest('.holder').find('.fullText').Show();
 });

 $('.holder .viewLess').click(function(){
  $(this).closest('.holder').find('.lessText').Show();
  $(this).closest('.holder').find('.fullText').hide();
 });