How to style text dynamically only on the current index that is being typed?

I am trying to make a text editor and I am trying to make it so when I click on the “boldButton” it makes only the text that I am currently typing bold but all the text before clicking that button a normal font.

For my HTML I am using a div with a contenteditable=”true”. Example:

<div id="box-txt-input" class="box-txt" contenteditable="true" placeholder="Enter text here..."></div>

Now for my Javascript I made a variable called “index” that gets 1 added to it every time that you have an “input” event and was hoping to get only the current index typed to have the fontWeight of Bold. Example:

const boldButton = document.querySelector("#bold")
const textBox = document.querySelector(".box-txt")
let index = 0

textBox.addEventListener("input", function () {
    index++
    
    boldButton.addEventListener("click", function () {

        textBox[index].textContent.style.fontWeight = "Bold"
    })
})

Here is a codepen to what I am working on as well. Sorry that you can’t see the icons but the “Bold” button is all the way to the left of the grey bar above the text area. You can see a tooltip when you hover over it. Codepen: https://codepen.io/Chasehud26/pen/xxJjEVG