Help with Script

[Josh687]

Hello, 

I'm trying to make a script in which product pictures only display if the customer has logged in and purchased the product. The script at the moment hides the product images until the customer is logged in but doesn't hide all the ones I haven't purchased. 

I'm sure it's something small like defining the wrong objects, but if anyone can help that would be amazing:

<script>
  const productImages = document.querySelectorAll('.product-single__thumbnail-image');

  {% if customer %}
    productImages.forEach(image => {
      {% for order in customer.orders %}
        {% for item in order.line_items %}
          {% if item.product_id == productId %}
            image.style.display = 'block';
          {% endif %}
        {% endfor %}
      {% endfor %}
    });
  {% else %}
    productImages.forEach(image => image.style.display = 'none');
  {% endif %}
</script>