On submit, I would like to get the POST value of company, which matches the ID (from data-id) of the selected value:

<form method="post" x-data="{ company: '' }">
    <input type="hidden" name="company" x-bind:value="company">
    <input list="companies" x-model="company">
    <datalist id="companies">
        <option data-id="1">Google</option>
        <option data-id="2">Amazon</option>
        <option data-id="3">Facebook</option>
        <option data-id="4">Apple</option>
    </datalist>
    <input type="submit">
</form>

Like this, I get the input[list="companies"] value, but not the data-id value of the selected option.

How can I sync the data-id value to the input[name="company"] hidden field?