JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">
<script src="https:////cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<select id="example">
    <option value="AA" data-id="143">AA</option>
    <option value="BB" data-id="344" selected>BB</option>
    <option value="CC" data-id="773">CC</option>
</select>
<br>
<br>
<button type="button" id="theButton">Click to reveal data-id!</button>
<br>
<p>data-id is: <span id='theAnswer'></span>
</p>

JavaScript

$("#example").select2();

$('#theButton').on('click', function () {
    $('#theAnswer').text($('#example option:selected').attr('data-id'));
});