列表中的“单击以替换主图像”替换第二个列表中的其他图像

Question

我在

中有两个列表，每个列表包含一个大图像以及一个容器，该容器包含其他较小的预览图像，这些图像将在单击后取代主图像。 除了以下几点，它几乎可以正常工作：

由于我有两个主列表，所以一个列表上的图像替换了第二个列表上的图像。

为什么会这样？

var mainImage = $(".mainimg");
$(".peek img").click(function(){
   var src = $(this).attr("src");
    $(".mainimg").attr("src",src);
});

.mainimg{width:50px; height45px;}

.panel{width:100%; height:auto; float:left;}
.peek img{width:20px; height:20px; }

<ul>
<li>

<img class='mainimg' src="https://cdn.pixabay.com/photo/2017/07/03/20/17/abstract-2468874_960_720.jpg" />

<div class="panel">
<div class="peek"><img src="https://cdn.pixabay.com/photo/2017/07/03/20/17/abstract-2468874_960_720.jpg"/></div>
<div class="peek"><img src="https://cdn.pixabay.com/photo/2016/12/15/20/21/background-1909992_960_720.jpg"/></div>
<div class="peek"><img src="https://cdn.pixabay.com/photo/2013/07/19/00/18/splashing-165192_960_720.jpg"/></div>
</div>
</li>

<li>
<img class='mainimg' src="https://cdn.pixabay.com/photo/2017/12/13/16/40/background-3017167_960_720.jpg" />

<div class="panel">
<div class="peek"><img src="https://cdn.pixabay.com/photo/2017/12/13/16/40/background-3017167_960_720.jpg"/></div>
<div class="peek"><img src="https://cdn.pixabay.com/photo/2018/03/24/08/56/color-3256055_960_720.jpg"/></div>
<div class="peek"><img src="https://cdn.pixabay.com/photo/2017/03/25/17/55/color-2174045_960_720.png"/></div>
</div>
</li>
</ul>