From what I can see on the page and custom code, you most likely misunderstood how ORDER and FILTERING works.
FILTERING let user select particular category in the list (select, checkboxes, etc, etc.) and plugin will show elements that belongs to that category.
ORDERING can only re-arrange filtered content in Ascending Order (E.g. 5, 9, 13, 17 and 21 are arranged in ascending order, similar with words it would be alphabetically) or Descending order (E.g. 25, 21, 17, 13 and 9 are arranged in descending order, with words it would be reverse-alphabetically).
You should make a decision either you want to control ORDERING by color/surface/rating/etc. or you want FILTER content by those categories.
Currently your controls presented as filters, but custom code modified (even with errors) as for the ordering. Depends on your decision, some structural changes should be made.
If you can let me know what is expected functionality in your project, I will do my best to help you setup correct structure and custom code.
It is possible to do with the mixitUp, except the functionality when available categories get excluded from the selects depending on the previous choices.
If you are okay with that here are steps you will need to do:
each category-type should be applied to the item separately, as a separate text element. It means that your collection structure probably needs to be changed. You can use option fields for each category or just plain text or even reference, but not a multi-reference (unfortunately).
each text element with the bound category have to have same classname that you can access at the custom code, if you need to style them different you can use combo-classes.
use the custom code from the page you mention at the beginning just remove those lines that related to ORDER
how do I insert the bound category in the dropdown list in the form
It is not necessary. The filter categories can be a static elements. You only need dynamic categories inside the items, each category as a separate text element.