Two dynamic select boxes with data attribute in both and dependant on them

How to get dynamic select boxes dependant on the value of data attributes in both?

Got this code

HTML

<select id="hours" onchange="giveSelection()">
  <option value="somethingA" data-option="1">optionA</option>
  <option value="somethingB" data-option="2">optionB</option>
</select>
<select id="paxno">
  <option data-option="1">optionC</option>
  <option data-option="1">optionD</option>
  <option data-option="2">optionE</option>
  <option data-option="1">optionF</option>
</select>

JS

var sel1 = document.querySelector('#hours');
var sel2 = document.querySelector('#paxno');
var options2 = sel2.querySelectorAll('option');

function giveSelection() {
  sel2.innerHTML = '';
  for(var i = 0; i < options2.length; i++) {
    if(options2[i].dataset.option === $("#hours").find(":selected").data("option")) {
      sel2.appendChild(options2[i]);
    }
  }
}

I have been trying to do this from the example given on this question on Stackoverflow, and it is working when data-attribute is non numeric but data stored in both will be numeric.

Any thoughts what I am doing wrong here? is this the best approach to 2 dynamic select boxes with both having data attributes?

Since you're using jQuery, you might as well use it all the way.

To make it consistent, always use the jQuery data() method. data() will always try to intelligently convert the value of the data field to another type if it can determine that it is a number, or an object, or an array, or etc. So your original was comparing a dataset.option to a data(), using === which removes type coersion. So nothing would ever be equal.

var sel1 = $('#hours');
var sel2 = $('#paxno');
var options2 = sel2.find('option');

function giveSelection() {
  var target = sel1.find(':selected').data('option');
  
  sel2.empty().append(
    options2.filter(function(){
      return $(this).data('option') === target;
    })
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="hours" onchange="giveSelection()">
  <option value="somethingA" data-option="1">optionA</option>
  <option value="somethingB" data-option="2">optionB</option>
</select>
<select id="paxno">
  <option data-option="1">optionC</option>
  <option data-option="1">optionD</option>
  <option data-option="2">optionE</option>
  <option data-option="1">optionF</option>
</select>