W3c Validator抱怨多个ID DIV？

Question

我通过验证HTML来解决这个烦人的问题。

首先，我在PHP中有两个WHILE LOOPS输出具有不同CLASS名称和ID名称的DIV。

但是，我也使用JQuery来切换我的DIV。每当我摆脱我的ID DIV“station_info”时，它将显示屏幕上DIV内的所有内容，并且切换不会工作但是如果我保持原样，它会抱怨重复的ID“station_info_＃number”。 / p>

任何人都可以帮助我。

这是我的working fiddle

提前感谢。

CSS：

/* 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;
}

JS / Jquery的：

<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> 

HTML / PHP：

//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";

W3C Validator上的错误消息：

错误行494，第79列：重复ID station_info_253。 ... nfo_253“style =”left：524px; top：353px;“＆gt; User：CHREI8
Station：... ✉ 警告线354，第79列：第一次出现ID station_info_253就在这里。

正如你所看到的那样，它是重复的，我知道因为ID必须是唯一的，但如果我将它改为类，我在DIV“station_info_＃”内的所有内容都会损坏并显示在屏幕上的任何地方。 / p>