diff --git a/src/main/resources/templates/recipe/explore.html b/src/main/resources/templates/recipe/explore.html
index 5a9b6b7..f0e2192 100644
--- a/src/main/resources/templates/recipe/explore.html
+++ b/src/main/resources/templates/recipe/explore.html
@@ -97,7 +97,8 @@
                         </div>
                         <div>
                             <table class="mix"
-                                   th:id="'mix-' + ${mix.id}">
+                                   th:id="'mix-' + ${mix.id}"
+                                   th:mixId="${mix.id}">
                                 <tr>
                                     <th th:text="#{keyword.material}"></th>
                                     <th th:text="#{keyword.type}"></th>
@@ -264,7 +265,17 @@
 
         $("#useSubmit").on({
             click: function () {
-                let formData = {};
+                let formData = [];
+
+                $(".mix").each(function() {
+                   const mixId = $(this).data("mixid");
+                   const materials = [];
+
+                   let i = 0;
+                   $(this).find(".quantityCustomizer").each(function() {
+                      materials[i] = $(this).data("materialid")
+                   });
+                });
 
                 $(".quantityCustomizer").each(function () {
                     const materialId = $(this).data("materialid");
@@ -274,8 +285,8 @@
                         formData[mixId] = {};
                     }
 
-                formData[mixId][materialId] = e.dataset.quantityml;
-            });
+                    formData[mixId][materialId] = e.dataset.quantityml;
+                });
 
                 clearNotEnoughClasses();
                 sendPost(formData, "/inventory/use", r => displayNotEnoughReason(r));