How to show stock quantity for all variants in shopify?

 <div id="stockstatus">
        {% if product.variants.size < 2 %}
          {% assign current_variant= product.variants.first %}
        {% endif %}
        {% if current_variant.inventory_quantity < 1 %}
            <p class="zero">Sold Out!<span class="variant-inventory">{{ current_variant.inventory_quantity }}</span></p>
        {% elsif current_variant.inventory_quantity < 6 %}
            <p class="few">Hurry! Only <span class="variant-inventory">{{ current_variant.inventory_quantity }}</span> left in stock.</p>
        {% else %}
            <p class="plenty"><span class="variant-inventory">{{ current_variant.inventory_quantity }}</span> available in stock.</p>
        {% endif %}
 </div>
<script>
     var inv_qty = {};
     {% for var in product.variants %}
           inv_qty[{{- var.id -}}] = {{ var.inventory_quantity | default: 0 }};
     {% endfor %}
</script>

if(inv_qty[ variant.id ] <1 || inv_qty[ variant.id ]==undefined)$("#stockstatus").html("<p class=zero>Sold Out!</span></p>");
    else if(inv_qty[ variant.id ] <6)$("#stockstatus").html("<p class=few>Hurry! Only <span class='variant-inventory'>"+ inv_qty[ variant.id ] + "</span> left in stock.</p>");
    else $("#stockstatus").html("<p class=plenty><span class='variant-inventory'>"+ inv_qty[ variant.id ] + "</span> available in stock.</p>");
  

p.zero,p.few,p.plenty{background: #b2e7b2;
    display: inline-block;
    padding: 3px 10px;}
p.few:before {
    content: "\f0e7";
    font-family: "FontAwesome";
    margin-right: 10px;}
p.zero:before {
    content: "\f119";
    font-family: "FontAwesome";
    margin-right: 10px;}
p.few,p.zero{color: #fff;background: #eb5050 !important;}

.variant-inventory{font-weight:bold}
or more specifically
#stockstatus .variant-inventory{font-weight:bold}