Javascript 我没有得到我想要的结果

我正在尝试根据从列表中选择的选项显示结果，但未获得结果。我希望当我单击选项1时，答案1将显示，其他答案将隐藏，当我选择选项2时，答案2将显示，否则所有答案将隐藏，依此类推

HTML:

<div id="amenities" target="1">option 1</div>
<div id="amenities" target="2">option 2</div>
<div id="amenities" target="3">option 3</div>
<div id="amenities" target="4">option 4</div>
<div id="amenities" target="5">option 5</div>
<div id="amenities" target="5">option 5</div>

<div id="list" class="amenities-list">answer 1</div>
<div id="list" class="amenities-list">answer 2</div>
<div id="list" class="amenities-list">answer 3</div>
<div id="list" class="amenities-list">answer 4</div>
<div id="list" class="amenities-list">answer 5</div>
<div id="list" class="amenities-list">answer 6</div>

JQuery:

jQuery(function(){
    jQuery('#amenities').click(function(){
        jQuery('.amenities-list').hide();
        jQuery('#list'+$(this).attr('target')).show();
    });
});

CSS:

.amenities-list{display: none;}

---

通过向div id添加编号来编辑div id。还可以将选项的id更改为class

<div class="amenities" target="1">option 1</div>
<div class="amenities" target="2">option 2</div>
<div class="amenities" target="3">option 3</div>
<div class="amenities" target="4">option 4</div>
<div class="amenities" target="5">option 5</div>
<div class="amenities" target="5">option 5</div>

<div id="list1" class="amenities-list">answer 1</div>
<div id="list2" class="amenities-list">answer 2</div>
<div id="list3" class="amenities-list">answer 3</div>
<div id="list4" class="amenities-list">answer 4</div>
<div id="list5" class="amenities-list">answer 5</div>
<div id="list6" class="amenities-list">answer 6</div>

---

DOM元素上的id属性应该是唯一的。@MikeChristensen你的意思是我必须更改答案id吗？我试图获得结果，就像我单击选项1时，JQuery触发一个函数并添加一个单击选项属性到列表中，这样答案就可以显示在屏幕上希望你明白我的意思。你不需要更多属性来显示答案。当前的代码show就足够了。在屏幕上显示答案是什么意思？

jQuery(function(){
    jQuery('.amenities').click(function(){
        jQuery('.amenities-list').hide();
        jQuery('#list'+$(this).attr('target')).show();
    });
});