id属性必须唯一。您可以使用class来代替它。

• • 超文本标记语言**

<li class="list_element">Target This element</li>
<button class="btn">toggle</button>

<li class="list_element" >Target This element</li>
<button class="btn">toggle</button>

<li class="list_element" >Target This element</li>
<button class="btn">toggle</button>

必须选择所有按钮，然后通过循环向每个按钮添加事件侦听器。

• • Javascript语言**

var btns = document.getElementsByClassName("btn");

for (let i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", () => {
         // Previous is li because li is before button
         btns[i].previousElementSibling.classList.toggle("done");
    });
}

现在这是工作。

您为所有按钮提供了相同的id，并且li使用类名代替id

btns= document.getElementsByClassName("btn");

它将选择所有包含按钮的类

for(let index = 0;index < btns.length; index++){
   btns[index].onclick = (evt) =>{
  evt.target.previousElementSibling.classList.toggle("done")
    }
}

循环所有你要点击的类，将得到那个元素，然后得到它们的前一个子元素li，并在上面切换类
一个一个二个一个一个一个三个一个一个一个一个一个四个一个

ID在页面中应该是唯一的，所以可以将它们切换到类。
如果你想要这些按钮，你应该把它们添加到列表项元素中。
您可以将一个侦听器附加到<ul>元素，并让该侦听器在子元素"冒泡" DOM时捕获它们的事件（这称为event delegation）。
当click事件被触发时，您可以检索用event.target单击的特定元素，检查它是否是按钮元素，找到该按钮的closest列表项元素，然后切换其类。

const list = document.querySelector('ul');
list.addEventListener('click', toggleDoneClass);

function toggleDoneClass(e) {
  if (e.target.matches('button')) {
    e.target.closest('li').classList.toggle('done');
  }
}

.done { text-decoration: line-through; text-decoration-thickness: 0.2rem; text-decoration-color:red; }
li button { margin-left: 0.5em; }

<ul>
  <li class="liEl">
    Target This element
    <button type="button">Toggle</button>
  </li>
  <li class="liEl">
    Target This element
    <button type="button">Toggle</button>
  </li>
  <li class="liEl">
    Target This element
    <button type="button">Toggle</button>
  </li>
</ul>

但是，最终，你并不真的需要按钮。
一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个