Help with two select, fill values correctly

Question

Good afternoon.

I need to put in my form two select, and the second has to present values according to the choice of the first.

In the example that I was told, I adapted according to the code below, but whenever I execute the code it takes the last value. I wanted when selecting for example Visa , appeared 1 (first installment), if I select Master, that also appeared parcel 1. I don’t understand where I’m going wrong, because you’re always selecting the last parcel.

Could you give me a hand with that?

Grateful

var parcelas = $('select[name="Parcela"] option');
$('select[name="Bandeira"]').on('change', function () {
    var Bandeira = this.value;
    var novoSelect = parcelas.filter(function () {
        return $(this).data('bandeira') == Bandeira;
    });
    $('select[name="Parcela"]').html(novoSelect);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row">
<div class="form-group col-md-3">
<select class="form-control" id="cartaoBandeira" name="Bandeira" required>
<option value="">Selecione o Cartão...</option>
<option value="Visa">Visa</option>
<option value="MasterCard">MasterCard</option>
</select>
  
<div class="row">
<div class="form-group col-md-3">
<select class="form-control" id="cartaoParcela" name="Parcela" required>
  <option data-bandeira="" value="">...</option>
<option data-bandeira="Visa" value="1">1</option>
<option data-bandeira="Visa" value="2">2</option>
<option data-bandeira="Visa" value="3">3</option>
<option data-bandeira="MasterCard" value="1">1</option>
<option data-bandeira="MasterCard" value="2">2</option>
<option data-bandeira="MasterCard" value="3">3</option>
<option data-bandeira="MasterCard" value="4">4</option>
<option data-bandeira="MasterCard" value="5">5</option>


</select>