Javascript W3c验证程序抱怨多个ID DIV？

我有一个恼人的问题，我通过验证我的HTML来解决

首先，我在PHP中有两个WHILE循环，它们输出具有不同类名和ID名的div

但是，我也在使用JQuery for切换我的DIV。每当我删除我的ID DIV station\u info时，它会在屏幕上显示该DIV中的所有内容，切换不会起作用，但如果我保持原样，它会抱怨重复的ID station\u info编号

谁能帮帮我吗

这是我的

提前谢谢

CSS:

JS/Jquery：

HTML/PHP：

W3C验证程序上的错误消息：

错误行494，第79列：重复ID站信息253。 …nfo_253 style=左：524px；顶部：353px；>用户：chrei8站：… ✉ 警告行354，第79列：第一次出现ID station_info_253是在这里

---

如你所见，它正在被复制，我知道，因为ID必须是唯一的，但如果我将其更改为DIV station内的所有内容分类，则信息将损坏并显示在屏幕上的所有位置。

我不清楚你为什么不能使用CALSS你的方法对这个问题没有帮助，我如何使用clsss而不是js中的ID，是您在Jquery函数中真正想知道的，在这里我执行var st=$station\u info\uid.toggle；如果我放一个点。而不是开关不起作用。尽管如此，W3C仍会抱怨来自站点的重复ID_info diving the fiddle这些ID对于W3C验证来说是唯一的，我们需要真实的URL来尝试验证您的页面，也许其他一些div使用这些ID。。。

/* desk boxes*/
.desk_box_ver{ 
width: 18px;
height: 33px;
}   

.desk_box_ver:hover{
cursor: pointer;
}


.desk_box_hor{ 
width: 23px;
height: 10px;
}   
.desk_box_hor:hover{
cursor: pointer;
}

.desk_box_hor, .desk_box_ver { 
position: absolute; 
border: 4px solid black; 
padding:10px;
}

/*station info*/
.station_info_ {
display: none;
z-index: 100;
position: absolute;
background-color: #F2F2F2;
border-radius: 5px;
box-shadow: 0px 0px 6px #B2B2B2;
height: 200px;
margin-left: 50px;
width:  275px;
border:4px solid black;
}

<script type="text/javascript">
                    //Display station information in a hidden DIV (station_info_) that is toggled with a closing (X) button
                    $(document).ready(function() {
                    $(".desk_box_hor").add(".desk_box_ver").click(function() {
                        var id = $(this).attr("data-rel")
                    var st = $("#station_info_"+id).toggle();
                    if (!st.has(".close").length) {
                    st.prepend('<button class="close">X</button>');
                    }//end if
                    });//end click
                    });//end ready

                    //Make the (x) button toggle
                    $(document).on("click",".close", function () {
                    $(this).parent().toggle(); 
                    });//end click close
      </script> 

//this is in a while loop and works
echo '<div class="' . $class . '" data-rel="' . $id . '" style="left:' . $x_pos . 'px;top:' . $y_pos.'px;">' . $sta_num . '</div>' . "\n";


//this is in another  while loop and the TOGGLE does work fine
echo '<div class="station_info_" id="station_info_' . $id . '" style="left:' . $x_pos . 'px;top:' . $y_pos . 'px;"><p class="numb">User:' . $user .'<br>Station:' . $hostname . '<br>Pod:' . $sta_num . '<br>Section:' . $sec_name . '<br>State:' . $state . '<br></p>' . $circle . '</div>' . "\n";