it is I, Boogabooga,

I have a conundrum which baffles me greatly. I have a function which dynamically creates some HTML elements with JS, and when setting the .value the results is completely different as to when I set dataset.value despite the same variable being assigned to both, below is my JS:

function displayBox(title, src, id){
    let container = document.createElement('div');
    let list = document.createElement('ul');
    let listItem = document.createElement('li');
    let image = new Image();
    listItem.innerHTML = title;
    image.src = src;
    listItem.dataset.value = id;
    listItem.value = id;
    listItem.innerHTML += id;
    list.appendChild(image);
    list.appendChild(listItem);
    container.appendChild(list);
    container.classList.add('shopifyProduct');
    return container;
}

Here is the HTML element when I inspect it with dev tools

<li data-value="6736442654756" value="1933934628">Cactus Sneaker Women 6736442654756</li>

I am outputting the value in the innerHTML as well just to see if somehow where I output it changes its value. As you can see in the above function the variable: id is being assigned to both attributes yet different values end up being assigned?

Has anyone encountered this strange behaviour before?

Thanks, -Boogabooga