Shopify Display Multiple Variant Drop-down on Collection Page

display-variants-dropdown-shopify-collection.liquid

<form action="/cart/add" method="post" style="text-align:center;">
  <select name="id">
  {% for variant in product.variants %}
    {% if variant.available %}
    <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
    {% else %}
    <option disabled="disabled">{{ variant.title }} - Sold Out</option>
    {% endif %}
  {% endfor %}
  </select>
  <input type="submit" value="Buy now" />
</form>

how to separate the variation title with the price like sample site
https://movementfood.com/collections/move-menu

the variation is dropdown but the price would be separate? please help

Hi! Thank you for sharing the code! I've added it to my collection page and now I can see the variants on each product, but unfortunately no matter which variant you select, the variant added to cart is the first available option in the product page. How do I solve this?
Thank you

I want all product variant inside a table with dropdown using js what should i do?