Javascript 划一条垂直线，让用户了解两个li元素组成一个组

我有一个HTML页面，其中包含几个LI元素，我想在我的LI元素上添加一个分组功能。例如，对于元素“college”和“automobile”，我想应用分组，我在它们上应用了相同的groupid，并应用了边距来区分它们。但我想应用一条垂直线，这样用户就可以正确地理解这两个LI元素是分组的，就像这个

渎职


木工


学院


汽车用品


钢铁工人


高中

您必须更改class属性的id属性，因为您在这里使用的是样式表，并且id是唯一的，所以不能像您正在使用的那样多次使用它

<div>
    <ul>
        <li title="Insurance">
            <div>
                <input type="checkbox" >
                <span>Malpractice</span>
            </div>
        </li>
        <li title="Construction">
            <div>
                <input type="checkbox" >
                <span>Carpentry</span>
            </div>
        </li>

        <li title="Education" class="grp1" style="margin-left:20px;">
            <div>
                <input type="checkbox" >
                <span>College</span>
            </div>
        </li>
        <li title="Insurance" class="grp1" style="margin-left:20px;">
            <div>
                <input type="checkbox" >
                <span>Automobile</span>
            </div>
        </li>

        <li title="Education">
            <div>
                <input type="checkbox" >
                <span>Iron Worker</span>
            </div>
        </li>
        <li title="Insurance">
            <div>
                <input type="checkbox" >
                <span>High School</span>
            </div>
        </li>

    </ul>
</div>

---

请记住不要关闭输入标记，输入被设计为一个元素，而不是一个容器，因此这里没有打开和关闭标记。

这就是您要找的吗

$（文档）。在（“单击”，“ul”，函数（）上）{
警报（“单击！”）；
})

。分组{
左边框：实心15px粉红色；
保证金：0；
填充：0；
}
.分组：之前{
字体系列：Fontsome；
内容：“\f03a”；
字体大小：10px；
位置：绝对位置；
左：10px；
顶部：10px；
光标：指针；
指针事件：全部；
}
李先生{
列表样式：无；
}
.李鹏{
左：1米；
}

学院
汽车

ID应为usique。改用类或数据属性：

数据id

。好的，我会修改它，但是实际的问题是什么呢？你可以使用

：第一个孩子和
：最后一个孩子，然后在第一个上设置
边框顶部
，在第二个上设置
边框底部
。是的，这很好，但在那个图标中，我需要一次点击，这样我就可以在单击该按钮，我可以启动javascript进行解组。我已经调整了代码。您现在可以单击图标。您已经对所有LI元素应用了分组。我只想对id为grp1I的LI元素应用分组。我还想在字体上应用单击事件。awesome图标必须是唯一的，所以这不起作用。就像我15分钟前说的，你可以点击图标。它是一条引人注目的线，但我需要一条带按钮的线来解组它
li.grp1 {
    border-left: 3px solid blue;
}