On our website when you click on one of the size's it would display a different price per size which works fine. For example size a = $10, size b = $20, size c = $30. What I'm trying to do however is when the price changes I want to take that value and use it to run another calculation.

The issue I have is that when I try and observe the change the value always stays the same i.e the price for size a ($10) gets printed each time. Not sure if anyone can help - below is a mockup example of how the code looks similar to onsite.

const elementToObserve = document.querySelector(".container");
const price = document.querySelector('.price');
const observer = new MutationObserver(function() {
  console.log(price.innerHTML);
});

observer.observe(elementToObserve, {
  subtree: true,
  childList: true
});

<div class='container'>
<ul class='buttons'>
  <li>size a</li>
  <li>size b</li>
  <li>size c</li>
</ul>

<p class='price'></p>
</div>