How to show low inventory for all variants on product page?

im trying to use this code:

{% if product.variants.first.inventory_quantity < 5 and product.variants.first.inventory_quantity > 0 %}

ONLY {{ product.variants.first.inventory_quantity }} LEFT

{% elsif product.variants.first.inventory_quantity < 1 %}

SOLD OUT

{% endif %}

but it only seems to work on the first variant and doesnt work when i change variants (ie XS, S, M etc)

Can anyone help with adjusting the code??

Hello, @Andia

What theme are you using? Can you share your store url?

Hi @Andia ,

You will have to modify JS to make this work. Currently you have added only the DOM elements. To make it dynamic, we will have to add custom JS[Most probably in global.js].

Dawn theme.

www.andiacollective.com.au

how do i do this?!