I'm having trouble getting a set of change events to work consistently: I have a table set up that checks to see whether either an input has been updated and then, depending on what input gets updated, the code submitted below either changes the margin or the price.

If I only change the price, I consistently calculate margin correctly, and if I only change the margin, I consistently calculate price correctly. If I change one and then the other, the second setAttribute doesn't work. (e.g. changing the price updates the margin, but, after that, changing margin, does not update price).

I'm new to JS, but I've tried debugging and can't seem to nail this down. Any help would be much appreciated.

see link for codepen: https://codepen.io/skeanerw/pen/mdBpppE

function calcBuySellMargin(bracket, rowID) {
    const vendPriceID = document.getElementById(`VendPrice_${bracket}_${rowID}`);
    const sellPriceID = document.getElementById(`ItemPrice_${bracket}_${rowID}`);
    const marginID = document.getElementById(`Margin_${bracket}_${rowID}`);
    const priceMeth = document.getElementById(`priceMeth_${rowID}`).innerText;
    const vpUOM = document.getElementById(`vpUOM_${rowID}`).innerText;

    //when we change the margin adjust the sell price.
    marginID.addEventListener('change', () => {
        let marginValue = (marginID.value) / 100
        let vendPriceValue = (vpUOM === 'M') ? vendPriceID.value / 1000 : vendPriceID.value;
        let sellPriceVal = (priceMeth === 'M') ? ((vendPriceValue / (1 - marginValue)) * 1000).toFixed(0) : (vendPriceValue / (1 - marginValue)).toFixed(3);
        sellPriceID.setAttribute('value', parseFloat(sellPriceVal));
    })

    //when we change the buy price or the sell price, adjust the margin.
    function setMargin() {
        let vendPriceValue = (vpUOM === 'M') ? vendPriceID.value / 1000 : vendPriceID.value;
        let sellPriceVal = (priceMeth === 'M') ? sellPriceID.value / 1000 : sellPriceID.value;
        const marginValue = parseFloat( (sellPriceVal - vendPriceValue) / sellPriceVal * 100 )
        marginID.setAttribute('value', parseFloat(marginValue).toFixed(0));
    }

    vendPriceID.addEventListener('change', () => {
        setMargin()
    })

    sellPriceID.addEventListener('change', () => {
        setMargin()
    })
}

window.onload = (event) => {
    document.querySelectorAll('.marginDisplay').forEach(element => {
        const rowID = (element.id.replace(/Margin_\d_/, ''));
        let bracket = (element.id.replace(/Margin_/,''))
        bracket = (bracket.match(/^[0-9]/, ''))
        calcBuySellMargin(bracket, rowID);
    })
}