JSFiddle - React, Tailwind, and code Playground

HTML

<select id="manufacturer_id">
  <option value=""></option>
  <option value="1">Manufacturer 1</option>
  <option value="2">Manufacturer 2</option>
  <option value="3">Manufacturer 3</option>
  <option value="4">Manufacturer 4</option>
</select>

<select id="bat_id">
  <option value="1" data-manufacturer="1">Bat 1</option>
  <option value="2" data-manufacturer="1">Bat 2</option>
  <option value="3" data-manufacturer="1">Bat 3</option>
  <option value="4" data-manufacturer="2">Bat 4</option>
  <option value="5" data-manufacturer="2">Bat 5</option>
  <option value="6" data-manufacturer="2">Bat 6</option>
  <option value="7" data-manufacturer="3">Bat 7</option>
  <option value="8" data-manufacturer="3">Bat 8</option>
  <option value="9" data-manufacturer="3">Bat 9</option>
  <option value="10" data-manufacturer="4">Bat 10</option>
  <option value="11" data-manufacturer="4">Bat 11</option>
  <option value="12" data-manufacturer="4">Bat 12</option>
</select>

JavaScript

$(function() {
    // rename the original select and hide it
    $('#bat_id').attr('id', 'bat_id_original').hide();
    
    $('#manufacturer_id').on('change', function() {
        $('#bat_id').remove(); // remove any bat_id selects
        $bat = $('#bat_id_original')
            .clone() // clone the original
            .attr('id', 'bat_id') // change the ID to the proper id
            .insertAfter('#bat_id_original') // place it
            .show()  // show it
            .find(':not(option[data-manufacturer="' + $(this).val() + '"])')
                .remove(); // find all options by other manufacturers and remove them
    });
});