JSFiddle - React, Tailwind, and code Playground

HTML

<select name="item1" id="item1" >
<optgroup label="Cat 1">	
<option value="27.50" data-id1="1">optie 1</option>	
<option value="25.50" data-id1="2">optie 2</option>
<option value="23.50" data-id1="3">optie 3</option>	
</optgroup>
<optgroup label="Cat 2">	
<option value="27.50" data-id1="4">optie 4</option>	
<option value="25.50" data-id1="5">optie 5</option>
<option value="23.50" data-id1="6">optie 6</option>	
</optgroup>
</select>
<input id="id1" name="id1" type="text" /><br>
<select name="item2" id="item2" >
<optgroup label="Cat 1">	
<option value="27.50" data-id2="1">optie 1</option>	
<option value="25.50" data-id2="2">optie 2</option>
<option value="23.50" data-id2="3">optie 3</option>	
</optgroup>
<optgroup label="Cat 2">	
<option value="27.50" data-id2="4">optie 4</option>	
<option value="25.50" data-id2="5">optie 5</option>
<option value="23.50" data-id2="6">optie 6</option>	
</optgroup>
</select>
<input id="id2" name="id2" type="text" />

JavaScript

$(function(){	
$('select').change(function(){	
var selected = $(this).find('option:selected');	
$("#id1").val(selected.data('id1'));	
}).change();
});

$(function(){	
$('select').change(function(){	
var selected = $(this).find('option:selected');	
$("#id2").val(selected.data('id2'));	
}).change();
});