HTML/JS中两个独立进度条无法分别显示对应百分比问题排查

故障由3处代码错误共同导致：

• HTML结构不符合规范：单份HTML文档仅允许存在1个<body>根节点，代码中额外嵌套了2个<body>标签，浏览器自动修正DOM结构时会打乱元素预期层级，引发选择异常。
• 元素选择逻辑错误：document.querySelector(".progress-bar")只会返回页面中第一个匹配该class的元素。两次调用该方法时，实际选中的都是AND进度条：第一次给AND条设置AND占比，第二次又把AND条的值覆盖为OR占比，OR进度条从未被选中操作，因此始终空白。
• 占比计算逻辑错误：计算OR进度条百分比时，误用了AND数组的总长度la作为除数，没有使用OR数组自身的总长度lo，计算出的OR占比数值本身错误。

• 删除所有嵌套的多余<body>标签，整个页面仅保留最外层的1个<body>节点。
• 给两个进度条添加唯一id属性，通过id精准匹配对应元素，避免通用class选择器匹配到错误目标。
• 修正OR进度条的占比计算公式，使用OR数组自身长度作为除数计算占比。
• 删除重复定义的同名makeProgress函数，同名函数重复定义时后者会覆盖前者，属于无意义的冗余代码。

首先修改进度条HTML结构，添加唯一id：

<!-- AND进度条 -->
<h4 class="small font-weight-bold">AND</h4>
<div class="progress">
    <div id="and-bar" class="progress-bar" style="min-width: 0px;"></div>
</div>

<!-- OR进度条 -->
<h4 class="small font-weight-bold">OR</h4>
<div class="progress">
    <div id="or-bar" class="progress-bar" style="min-width: 0px;"></div>
</div>

然后修改对应JavaScript逻辑：

// AND进度条逻辑
const and = ["And_1","And_2","And_3","And_4","And_5","And_6","And_7"];
const myand = ["And_1","And_2"];
const la = and.length;
const lm = myand.length;
let mywid = 0;
for(let i=0; i<la; i++){
    for(let j=0; j<lm; j++){
        if(and[i] === myand[j]) mywid++;
    }
}
let perc = (99/la)*mywid;
perc = Math.round((perc + Number.EPSILON) * 100) / 100;
// 精准选中AND进度条
const andBar = document.querySelector("#and-bar");
andBar.style.width = `${perc}%`;
andBar.innerText = `${perc}%`;

// OR进度条逻辑
const or = ["Or_1","Or_2","Or_3","Or_4","Or_5"];
const myor = ["Or_1"];
const lo = or.length;
const lmo = myor.length;
let orwid = 0;
for(let i=0; i<lo; i++){
    for(let j=0; j<lmo; j++){
        if(or[i] === myor[j]) orwid++;
    }
}
// 修正除数为OR数组自身长度lo
let orperc = (99/lo)*orwid;
orperc = Math.round((orperc + Number.EPSILON) * 100) / 100;
// 精准选中OR进度条
const orBar = document.querySelector("#or-bar");
orBar.style.width = `${orperc}%`;
orBar.innerText = `${orperc}%`;

内容的提问来源于stack exchange，提问作者g.het