Can't add HTML or CSS with a metafield value

[Majit]

I am trying to show different shipping time for each variant when the customer click on a variant. This code below works perfectly. But the problem is when I try to add some text with HTML and try to design it with CSS before this line:  {{variant.id}}:{{ variant.metafields.my_fields.shipping | json }}{% unless forloop.last %},{% endunless %} it does not show the metafield value. I can I show the metafield value with my custom design and text before the metafield value?  Any help will be highly appreciated. 

        <p class="variant_shipping_info" style="display: none;"></p>

        {% capture 'meta_data' %}

           {% unless variant.metafields.my_fields.shipping != blank %}
           {% for variant in product.variants %}
           {% if variant.inventory_quantity <= 0 and variant.inventory_policy == 'continue' %}

           {{variant.id}}:{{ variant.metafields.my_fields.shipping | json }}{% unless forloop.last %},{% endunless %}

          {% endif %}
          {% endfor %}
          {% endunless %}

          {% endcapture %}

          <script>
          const currentVariantId = {{ product.selected_or_first_available_variant.id }}; // get the currently selected before variant is changed.
          const metaData = { {{ meta_data }} };

          const shippingInfo = (id) => {
          var selector = document.querySelector('.variant_shipping_info');
          if (metaData[id]) {
          selector.style.display = 'block'
          selector.innerHTML = metaData[id];
           }
         }
       shippingInfo(currentVariantId);

          // When the variant is changed, get the id and call the function. 🙂
         document.addEventListener('variant:changed', function(event) {
        var variant = event.detail.variant; // Gives you access to the whole variant details
         var id = variant.id
        shippingInfo(id);
          });

          </script>

[PaulNewton]

Try {{ variant.metafields.my_fields.shipping.value }}

https://shopify.dev/api/liquid/objects/metafield#metafield-value

For general troubleshooting pepper your code with outputs so you can see what's actually going on, ex:

{% unless variant.metafields.my_fields.shipping != blank %}
    <p>variant.metafields.my_fields.shipping is not blank</p>
    {% for variant in product.variants %}
        <p>#{{forloop.index0}} variant: {{variant}} </p>
        {% if variant.inventory_quantity <= 0 and variant.inventory_policy == 'continue' %}
            {{variant.id}}:{{ variant.metafields.my_fields.shipping | json }}{% unless forloop.last %},{% endunless %}
        {% else %}
            <p>variant.inventory_quantity:{{variant.inventory_quantity}} , variant.inventory_policy:{{variant.inventory_policy}}</p>
        {% endif %}
    {% endfor %}
{% endunless %}