JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<select class="select-multiple" name="item" multiple="multiple">
  <option value="pen" data-price="2.5">Pen</option>
  <option value="pencil" data-price="1.5">Pencil</option>
  <option value="eraser" data-price="0.5">Eraser</option>
</select>

CSS

.select-multiple {
  width: 200px;
}

JavaScript

$('.select-multiple').select2({

});

$('.select-multiple').change(function () {
	//var price = $(this).find(':selected').data('price');
  var price = $(this).find(':selected');
  
  $.each(price, function(){
      console.log('Price: ', $(this).data("price"));
  });
});