JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="pedal-list"></select>

JavaScript

var pedals = [
    {
        "Type" : "Overdrive",
        "Brand" : "Chase Bliss",
        "Name" : "Brothers",
        "Width" : 2.75,
        "Height" : 4.77,
        "Image" : "public/images/pedals/chasebliss-brothers.png"
    },
    {
        "Type" : "WahWah",
        "Brand" : "Chase Bliss",
        "Name" : "Sisters",
        "Width" : 2.75,
        "Height" : 4.77,
        "Image" : "public/images/pedals/chasebliss-sisters.png"
    },
    {
        "Type" : "Overdrive",
        "Brand" : "Another Brand",
        "Name" : "AWESOME",
        "Width" : 2.75,
        "Height" : 4.77,
        "Image" : "public/images/pedals/chasebliss-brothers.png"
    },
];

let optionGroups = pedals.reduce((optionGroups, pedal) => { 
  let optionGroup = optionGroups.find(group => pedal.Brand === group.brandName) || {}
  
  if (!optionGroup.brandName) {
  	optionGroup.brandName = pedal.Brand
    optionGroup.items = []
    optionGroups.push(optionGroup)
  }
  
  optionGroup.items.push(pedal)
  return optionGroups
}, [])

window.renderPedals = (optionGroups) => {
  optionGroups.map((group) => {
  	let $optgroup = $("<optgroup>", {
      label: group.brandName
    });
    
    group.items.map((pedal) => {
      let {Type, Brand, Name, Width, Height, Image} = pedal;
    	let $pedal = $("<option>", {
        text: `${Brand} ${Name}`,
        id: `${Name.toLowerCase().replace(/\s+/g, "-").replace(/'/g, '')}`,
        data: {
          width: Width,
          height: Height,
          image: Image
        },
        appendTo: $optgroup
      });
    })
    $optgroup.appendTo(".pedal-list");
  })
}

console.log(optionGroups)
window.renderPedals(optionGroups)