JSFiddle - React, Tailwind, and code Playground

by chadarsenault

HTML

<div id="edit-category-wrapper" class="views-exposed-widget views-widget-filter-field_product_category_tid">
                  <label for="edit-category">
            Category          </label>
                        <div class="views-widget">
          <div class="form-item form-type-select form-item-category">
 <div class="bef-select-as-links"><div class="form-item">
 <div id="edit-category-all" class="form-item form-type-bef-link form-item-edit-category-all">
 <a href="http://staging.bluewater.ca/products/search?category=All&amp;species=18">- Any -</a>
</div>
<div id="edit-category-52" class="form-item selected form-type-bef-link form-item selected-edit-category-52">
 <a href="http://staging.bluewater.ca/products/search?category=52&amp;species=18">Gluten-Free</a>
</div>
<div id="edit-category-12" class="form-item form-type-bef-link form-item-edit-category-12">
 <a href="http://staging.bluewater.ca/products/search?category=12&amp;species=18">Traditional Breaded</a>
</div>
<div id="edit-category-13" class="form-item form-type-bef-link form-item-edit-category-13">
 <a href="http://staging.bluewater.ca/products/search?category=13&amp;species=18">Seasoned Breaded</a>
</div>
<div id="edit-category-15" class="form-item form-type-bef-link form-item-edit-category-15">
 <a href="http://staging.bluewater.ca/products/search?category=15&amp;species=18">Battered</a>
</div>
<div id="edit-category-8" class="form-item form-type-bef-link form-item-edit-category-8">
 <a href="http://staging.bluewater.ca/products/search?category=8&amp;species=18">Pan Sear</a>
</div>
<div id="edit-category-7" class="form-item form-type-bef-link form-item-edit-category-7">
 <a href="http://staging.bluewater.ca/products/search?category=7&amp;species=18">Grill</a>
</div>
<div id="edit-category-9" class="form-item form-type-bef-link form-item-edit-category-9">
 <a href="http://staging.bluewater.ca/products/search?category=9&amp;species=18">Sauced</a>
</div>

</div>
<input type="hidden"...

JavaScript

var SelectMenu = {
    categories: function() {
        var categories = [];
        $('#edit-category-wrapper .form-type-bef-link').each(function() {
            var id = $(this).attr('id').replace('edit-category-', '').trim();
            var option = $(this).text().replace(/(\r\n|\n|\r)/gm, '').trim();
            categories.push({id:id, option:option});
        });
        return categories;
    },
    species: function() {
        var species = [];
        $('#edit-species-wrapper .form-type-bef-link').each(function() {
            var id = $(this).attr('id').replace('edit-species-', '').trim();
            var option = $(this).text().replace(/(\r\n|\n|\r)/gm, '').trim();
            species.push({id:id, option:option});
        });
        return species;
    }
};