Stock Quantity Not Updating on Size Selection in Django Template with JavaScript

Problem Description:
I’m working on a Django project where a product can have multiple size variants, and each size has its own stock quantity. I want to display the stock information dynamically when a user selects a size using JavaScript.

However, the stock information is not updating as expected. It always shows undefined in stock or Only undefined left, even though I can see the correct stock data in the browser console.

---

Models:

class Size(models.Model):
    name = models.CharField(max_length=50)

class Product(models.Model):
    title = models.CharField(max_length=255)

class ProductStock(models.Model):
    product = models.ForeignKey(Product, on_delete=models.CASCADE, related_name="stocks")
    size = models.ForeignKey(Size, on_delete=models.CASCADE, blank=True, null=True)
    uploded_stock_quantity = models.PositiveIntegerField(default=0)
    stock_quantity = models.PositiveIntegerField(default=0)
    reserved_stock = models.PositiveIntegerField(default=0)

    def available_stock(self):
        return self.stock_quantity - self.reserved_stock

---

Views:

from django.shortcuts import render, get_object_or_404

def product_detail_view(request, pid):
    product = get_object_or_404(Product, pid=pid)
    sizes = product.size.filter(product=product)
    product_stocks = ProductStock.objects.filter(product=product)
    
    size_stock_data = {
        str(stock.size.id): {
            'stock_quantity': stock.stock_quantity,
            'uploaded_stock_quantity': stock.uploded_stock_quantity
        }
        for stock in product_stocks
    }

    return render(request, 'core/product_detail.html', {
        'product': product,
        'sizes': sizes,
        'size_stock_data': size_stock_data
    })

---

Template:

{{ size_stock_data|safe|json_script:"size-stock-data" }}

<div class="u-s-m-b-15">
  <div class="pd-detail__inline">
    <span class="pd-detail__stock" id="uploaded-stock">-</span>
    <span class="pd-detail__left" id="remaining-stock">-</span>
  </div>
</div>

{% if sizes %}
  <div class="u-s-m-b-15">
    <span class="pd-detail__label u-s-m-b-8">Size:</span>
    <div class="pd-detail__size">
      {% for s in sizes %}
      <div class="size__radio">
        <input type="radio" id="size_{{ s.id }}" name="size" value="{{ s.id }}" onclick="updateStock(this)" {% if forloop.first %}checked{% endif %}>
        <label class="size__radio-label" for="size_{{ s.id }}">{{ s.name }}</label>
      </div>
      {% endfor %}
    </div>
  </div>
{% endif %}

---

JavaScript:

function updateStock(element) {
  const sizeId = element.value;
  const stockDataElement = document.getElementById('size-stock-data');

  if (!stockDataElement) {
    console.error("Stock data not found!");
    return;
  }

  try {
    const stockData = JSON.parse(stockDataElement.textContent);
    console.log("Parsed Stock Data:", stockData);
    console.log("Selected Size ID:", sizeId);

    if (stockData[sizeId]) {
      const uploadedStock = stockData[sizeId].uploaded_stock_quantity;
      const stockQuantity = stockData[sizeId].stock_quantity;
      document.getElementById('uploaded-stock').innerText = `${uploadedStock} in stock`;
      document.getElementById('remaining-stock').innerText = `Only ${stockQuantity} left`;
    } else {
      console.error("No stock data available for size:", sizeId);
    }
  } catch (error) {
    console.error("Error parsing stock data:", error);
  }
}

// Trigger for initially selected size
document.addEventListener('DOMContentLoaded', function() {
  const checkedSize = document.querySelector('input[name="size"]:checked');
  if (checkedSize) {
    updateStock(checkedSize);
  }
});

---

Issue Faced:

• undefined in stock or Only undefined left
• The stock data is visible in the console using console.log, but the values are not reflected in the HTML.
• No JavaScript errors in the console.

---

What I Tried:

1. Confirmed size_stock_data is correctly passed to the template.
2. Verified json_script using console.log(document.getElementById('size-stock-data').textContent).
3. Confirmed HTML IDs are correct and not duplicated.
4. Ensured the size IDs are properly rendered.

---

Expected Result:

• When a size is selected, it should update the stock details with the correct values like 100 in stock and Only 98 left.

How can I fix this issue? Any suggestions are appreciated!