I’m super new to JS, HTML, and CSS. I’ve looked up many answers but can’t quite understand the context when applied to my situation. Button 2 is what needs the onClick function, but I’m not sure how to implement the strikethrough aspect. Thank you!

My JS goes as follows:

    document.getElementById("submit-btn").addEventListener("click", function() {
            let text = document.getElementById("text-box").value;
            let li = document.createElement("li");
            li.setAttribute = ("id", "list");
            li.innerText = text;
            document.getElementById("unordered-list").appendChild(li);
            
            let button = document.createElement("button");
            button.innerText = "X";
            button.setAttribute = ("id", "b1");
            li.appendChild(button);
            button.addEventListener("click", () => li.parentNode.removeChild(li));
            document.getElementById("unordered-list").appendChild(li);
            
            let button2 = document.createElement("button");
            button2.innerText = "Done";
            button2.setAttribute = ("id", "b2");
            li.appendChild(button2);
           
            li.appendChild(button);
            li.appendChild(button2);
    }
)};

HTML:

        <header id="to-do-box">
            <h1>To-Do List</h1>
            <div id="top-half">
                <form>    
                <input type="text" id="text-box" placeholder="Add an item!">
                <button type="button" id="submit-btn">Submit</button>
                <button type="button" id="clear-field-btn">Clear field</button>
                </form> 
            </div>
        </header>
        <div id="ul">
            <ul id="unordered-list"></ul>
        </div>
   </body>
</html>