如何用JS实现：鼠标点击一个li里的a标签时，将li中隐藏的div内容显示出来

刚开始学js，网页需要一个功能，就是点击li中的a链接，将隐藏的div显示出来。现在页面是这样的

img


想要的效果是，点击某个li中的a链接，显示相应的div。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Home</title>
    <!-- <script src="../js/jquery.min.js" type="text/javascript"></script> -->
    <style>
        .dingwei li {
            position: relative;
            border: 1px solid red;
        }
        
        .window_css {
            border: 1px solid blue;
            display: none;
            position: absolute;
            bottom: 0%;
            /* left: 25%; */
            width: 250px;
            height: 60%;
            background-color: aliceblue;
            z-index: 11;
        }
    </style>
</head>

<body>
    <ul>
        <li>
        <div id="window" class="window_css" >
            <form action="javascript:fuwu();" method="POST">
             <input type="text" name="shijian" placeholder="预约的天数"  class="riqi" id="shijian">
          
            <button>提交</button>
            </form>
            <!-- <a href="javascript:void(0)" onclick="hideWindow()"> -->
            <a href="javascript:void(0)" onclick="hideWindow()">

                x
            </a>
        </div>
        <a href="javascript:displayWindow();" style="text-align: center;margin:15px 0;display:block" id="yuding">预订</a>

        </li>
        <li>
        <div id="window" class="window_css" >
            <form action="javascript:fuwu(<?php echo $info['id']; ?>,'<?php echo $info['fuwuming']; ?>');" method="POST">
             <input type="text" name="shijian" placeholder="预约的天数"  class="riqi" id="shijian">
          
            <button>提交</button>
            </form>
            <!-- <a href="javascript:void(0)" onclick="hideWindow()"> -->
            <a href="javascript:void(0)" onclick="hideWindow()">

                x
            </a>
        </div>
        <a href="javascript:displayWindow();" style="text-align: center;margin:15px 0;display:block" id="yuding">预订</a>

        </li>
        <li>
        <div id="window" class="window_css" >
            <form action="javascript:fuwu(<?php echo $info['id']; ?>,'<?php echo $info['fuwuming']; ?>');" method="POST">
             <input type="text" name="shijian" placeholder="预约的天数"  class="riqi" id="shijian">
          
            <button>提交</button>
            </form>
            <!-- <a href="javascript:void(0)" onclick="hideWindow()"> -->
            <a href="javascript:void(0)" onclick="hideWindow()">

                x
            </a>
        </div>
        <a href="javascript:displayWindow();" style="text-align: center;margin:15px 0;display:block" id="yuding">预订</a>

        </li>
        <li>
        <div id="window" class="window_css" >
            <form action="javascript:fuwu(<?php echo $info['id']; ?>,'<?php echo $info['fuwuming']; ?>');" method="POST">
             <input type="text" name="shijian" placeholder="预约的天数"  class="riqi" id="shijian">
          
            <button>提交</button>
            </form>
            <!-- <a href="javascript:void(0)" onclick="hideWindow()"> -->
            <a href="javascript:void(0)" onclick="hideWindow()">

                x
            </a>
        </div>
        <a href="javascript:displayWindow();" style="text-align: center;margin:15px 0;display:block" id="yuding">预订</a>

        </li>
    </ul>
    <script>
        function displayWindow(id,fuwuming) {
            /*悬浮窗口的显示,需要将display变成block*/
             document.getElementById("window").style.display = "block";
        
        }
        
        /*当点击调用此方法,将悬浮窗口和背景全部隐藏*/
        function hideWindow() {
            document.getElementById("window").style.display = "none";

        }
    </script>
</body>

</html>

现在只实现了点击按钮可以显示第一个的div，没有办法在剩下li中的相应位置显示div

id选择器是唯一的一个，不能多个同时使用同一个id