This code changes the style of a targeted element in the console debug but does not change it in the DOM

`let html
function display(array){
    tasksList.innerHTML = ''
    html = ''
    array.forEach(elm=>{

        html += `<li>

        <span id="${elm.id}" class="${elm.class}">${elm.title}</span>

        <p >${elm.desc}</p>
                <div>
                <button id="${elm.id}" class="done-task">Done</button>
                <button id="${elm.id}" class="delete-task">Delete</button>
                <button id="${elm.id}" class="edit-task">Edit</button>
                </div>
            </li>`

            tasksList.innerHTML = html
    })
}

tasksList.addEventListener('click', (e)=>{

    if(e.target.tagName == 'SPAN'){
        console.log(e.target.nextElementSibling.tagName)

            e.target.nextElementSibling.classList.toggle('desc')
            e.target.style.color = 'red'

    console.log('Changed color to red for', e.target.nextElementSibling);
    }
})

this is the only css related to that part:

  #tasks-list li span{
           cursor: pointer;
        }
        /* #tasks-list li p{
            display: none;
        } */

        .desc{
            display: none;
        }`

in the console it states that the nextElementSibling is actually adding the class and the style but in the same time in the DOM it doesn’t.

I have tried adding the class manually to the

and it did hide the element.
I tried console logging the targetElement and to console log its sibling and indeed they both return to be the span and the p.