Hi,
When you click on the add to cart button, it submits the form of the button. Inside it, there is the hidden input with the id hikashop_product_id_main which contains the product id or current variant id if your product has a characteristic.
Your issue is that you have twice that hidden input field on your page (one for each product form) and when you select another characteristic variant for a product, the javascript replaces the id in that hidden input using its id, but since the id is not unique on the page, it's not replacing the correct one and you don't get the id of the variant updated. Which means that you always get the default variant added in the cart in that case.
The solution is to change the javascript function which handle the copying of the id (and the other product data) when you select another characteristic variant so that it copy the data in the correct elements.
That's done by the hikashopUpdateVariant javascripti function call of your color selectors and you will find the JS code of that function in the file administrator/components/com_hikashop/types/characteristic.php