使用数据属性和ID显示多个部分

Question

我试图根据映射到列表的数据属性显示多个部分

<!--Flavor List-->
<ul>
<li class="active" data-related="flavor-info1">VANILLA</li>
<li data-related="flavor-info2">CHOCOLATE</li>
<li data-related="flavor-info3">STRAWBERRY</li>
<li data-related="flavor-info4">WILD BERRIES</li>
</ul>

根据以上属性，将显示相应的图像。

<!-- Flavor Images-->
<div>
<div class="flavor-info visible" id="flavor-info1">
<img src="../img/vanilla-info.png" class="img-responsive" alt="">                    </div>
<div class="flavor-info" id="flavor-info2">
<img src="../img/choco-info.png" class="img-responsive" alt="">
</div>
<div class="flavor-info" id="flavor-info3">
<img src="../img/strawberry-info.png" class="img-responsive" alt="">
</div>
<div class="flavor-info" id="flavor-info4">
<img src="../img/berry-info.png" class="img-responsive" alt="">
</div>
</div>

我尝试了以下jQuery，它运行正常。

$(".flavor-list li").each(function() {
$(this).click(function(){
$("div[id=" + $(this).attr("data-related") + "]").addClass("visible");
});
});

我必须展示另一个与列表中具有相同数据属性的图像无关的独立部分。

<!-- Flavor Description-->
<div class="flavor-desc">This is chocolate</div>
<div class="flavor-desc">This is Vanilla</div>
<div class="flavor-desc">This is Strawberry</div>

是否可以添加一个将分别显示描述的数据属性。这里的期望是一键显示图像和描述。