Shopify Variant checkbox instead of dropdown - shopify

Question

I'm trying to make it so that my variants are display like the following image instead of the default dropdown Shopify provides.
I'm currently using the following code, but it throws up an error when trying to add something to the basket. The error states "Parameter Missing or Invalid: Required parameter missing or invalid: id"
<form action="/cart/add" method="post" enctype="multipart/form-data">
{% for variant in product.variants %}
{% if variant.available == true %}
<fieldset class="group">
<ul class="checkbox">
<li>
<input type="checkbox" value="{{variant.id}}">
<label>{{ variant.title }} for {{ variant.price | money_with_currency }}</label>
</input>
</li>
</ul>
</fieldset>
{% else %}
<option disabled="disabled"> {{ variant.title }} - sold out!</option>
{% endif %}
{% endfor %}
<input type="submit" name="add" id="add" class="inpost-buy w-button" value="Add to Bag →"></input>
</form>

Answer 1

You are missing your name attribute for the checkbox.
It should have name="id". ( or if you are really determine to have checkboxes and not radio buttons it should be name="id[]" )
In addition, this is not a valid HTML code:
<input type="checkbox" value="{{variant.id}}">
<label>{{ variant.title }} for {{ variant.price | money_with_currency }}</label>
</input>
You can't have label inside of an input. The other way around will be OK.
And there is no point for this, since you are not using select any more:
<option disabled="disabled"> {{ variant.title }} - sold out!</option>