[SOLVED] How to get the selected element of the dropdown selectMenu widgets having the same classes using jQuery?

I developed a dropdown list using the jQuery UI selectMenu widget. Although I developed a drop-down component in the Angular and reused it many times. Now the problem was that I gave the same class name to each of those dropdown lists and I was trying to get the value of the selected option from each of the dropdown lists. Given below is the code.

$(function() {
  $.widget("custom.mySelectMenu", $.ui.selectmenu, {
    _renderMenu: function(ul, items) {
      console.log(items);
      var that = this,
        currentCategory = "";
      ul.parent().prepend("<ul class='ui-header ui-menu ui-corner-bottom ui-widget ui-widget-content'><li class='ui-menu-item'><span class='ui-menu-item-wrapper'>" + "CODE" + "</span><span class='ui-menu-item-wrapper'>" + "DESCRIPTION" + "</span><span class='ui-menu-item-wrapper'>" + "PRICE" + "</span></li></ul>");
      $.each(items, function(index, item) {
        var li, name, short, price;
        if (item.optgroup != currentCategory) {
          ul.append(
            "<li class='ui-selectmenu-optgroup ui-menu-divider ui-selectmenu-category'>" + item.optgroup + "</li>"
          );
          currentCategory = item.optgroup;
        }
        li = that._renderItemData(ul, item);
        console.log(ul);
        name = li.text();
        short = item.element.data("short");
        price = item.element.data("price");
        // console.log(li, short, price);
        li.prepend(
          $("<span>", {
            class: "short"
          }).html(short)
        );
        li.append(
          $("<span>", {
            class: "price"
          }).html(price)
        );
        if (item.optgroup) {
          li.attr("aria-label", item.optgroup + " : " + item.label);
        }
      });
    }
  });

  $(".options").mySelectMenu({
    width: 300
  });
  $(".options")
    .mySelectMenu("menuWidget")
    .addClass("overflow");
});

.ui-menu .ui-menu-item {
  display: table;
  width: 100%;
}

.ui-selectmenu-category {
  color: #5f5f5f;
  padding: 0.5em 0.25em;
  min-width: 290px;
  font-style: italic;
}

.ui-header {
  font-weight: bold;
  position: absolute;
  background-color: #004600;
  z-index: 1;
  height: 25px;
  width: 100%;
}

.ui-header .ui-menu-item .ui-menu-item-wrapper {
  padding: 0px;
}

#options-menu {
  margin-top: 25px;
}

.ui-menu-item .ui-menu-item-wrapper {
  display: table-cell;
  vertical-align: top;
  padding: 1em 2px;
}

.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
  margin: 0;
  border-width: 1px 0px 1px 0px;
  border-color: #cccccc;
  background-color: #e4ebf1;
  color: #000;
}

.ui-menu-item .ui-menu-item-wrapper.ui-state-active.short {
  color: #2e6d99;
}

.ui-menu-item div.ui-menu-item-wrapper {
  width: 290px;
}

.ui-menu-item .short {
  color: #2e6d99;
  font-weight: strong;
  width: 30px;
  padding-left: 0.5em;
  position: relative;
}

.ui-menu-item .price {
  font-weight: strong;
  width: 75px;
  margin-right: -6px;
}

.overflow {
  height: 150px;
}

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Selectmenu - Custom Rendering</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>
  <label for="options">Select an Option:</label>
  <select class="options">
  <optgroup label="PREFERRED OPTIONS">
    <option data-short="L" data-price="$0.00">Standard Screw Adjustment dkjsahdksajd sdhsdl sdshad ;sldh sd;lsa d;lsajd</option>
    <option data-short="K" data-price="$0.00">Standard Screw Adjustment</option>
  </optgroup>
  <optgroup label="STANDARD OPTIONS">
    <option data-short="C" data-price="$5.00" >Tamper Resistant - Factory Set</option>
    <option data-short="K" data-price="$6.00" >Handknob</option>
  </optgroup>
  <optgroup label="ADDITIONAL OPTIONS">
    <option data-short="F" data-price="$4.00">Hex Head Screw with Locknut</option>
    <option data-short="G" data-price="$4.00">Hex Head Screw with Locknut</option>
    <option data-short="H" data-price="$4.00" >Hex Head Screw with Locknut</option>
  </optgroup>
</select>
  <br><br>
  <label for="options">Select an Option:</label>
  <select class="options">
  <optgroup label="PREFERRED OPTIONS">
    <option data-short="L" data-price="$0.00">Standard Screw Adjustment dkjsahdksajd sdhsdl sdshad ;sldh sd;lsa d;lsajd</option>
    <option data-short="K" data-price="$0.00">Standard Screw Adjustment</option>
  </optgroup>
  <optgroup label="STANDARD OPTIONS">
    <option data-short="C" data-price="$5.00" >Tamper Resistant - Factory Set</option>
    <option data-short="K" data-price="$6.00" >Handknob</option>
  </optgroup>
  <optgroup label="ADDITIONAL OPTIONS">
    <option data-short="F" data-price="$4.00">Hex Head Screw with Locknut</option>
    <option data-short="G" data-price="$4.00">Hex Head Screw with Locknut</option>
    <option data-short="H" data-price="$4.00" >Hex Head Screw with Locknut</option>
  </optgroup>
</select>
</body>

</html>

Now, given below is the jQuery code which I wrote for getting the selected element in each of those dropdown lists.

  $('.options').mySelectMenu({
        change: function (event, ui) {
          console.log($('option:selected').text());
        }
      });

Now, writing like this printed the values of all the selected options of all the dropdown lists which I don't want but what I wanted was to print the value of only one option of only one dropdown list.

Can anyone suggest how to do that in this case?