JS/jQuery: using dropdown box to set values in another field, is altering previous fields?

Question

I have page with multiple drop down menus for employees to select a sales package, these drop down menus are completely identical.

Now when a user selects a sales package say packageA, it prefills a field on the page with the default amount for that package say $100. In the next dropdown packageA is available for selection again. In this next dropdown if a user selects PackageB it prefills the amount with the previous dropdowns value of $100, which is not the correct package price? Basically the money value autofill is only working with the first dropdown selection box on the page. Whatever is selected in the first dropdown changes every other packages money field value on the page?

I understand that by getting the element by ID is not efficient in the case here, yet getting by className does not work at all.

This HTML dropdown select box is repeated a few times on the page.

<!-- this is the dropdown -->
<select id="package-dropdown" class="selectpicker pkg-class">
    <option value="">Select</option>
    <option data-value="{{ django ID here }}" value="{{ django value here}}">{{django variable here}}. 
    <option data-value="{{ django ID here }}" value="{{ django value here}}">{{django variable here}}. 
    <option data-value="{{ django ID here }}" value="{{ django value here}}">{{django variable here}}. 
    </option>
</select>

<!-- where the monetary value gets prefilled -->
<div class="col-sm-5">
    <input min="0" type="number" class="display-package-amount" class="form-control" placeholder="Amount">
</div>


// JS on change function
   

 $(document).on('change','#package-dropdown', function(e) {
      let package = document.getElementById("package-dropdown");
       // This is where the price gets prefilled based off of the package selected
      $(".display-package-amount").val(package.options[package.selectedIndex].getAttribute('data-value'));
  });

Im struggling pretty bad on how to make these actually independent from each other to where each select box truly has nothing to do with the previous/next one. Any tips would be greatly appreciated!

Answer 1

You can't repeat ID in a page so use classes instead.

To get the associated input , traverse to a common parent with closest() then find() what you need within that parent

$(document).on('change', '.selectpicker', function() {
  $(this).closest('.row').find('.display-package-amount').val(this.value)
})

.row {
  padding: 1em;
  border: 2px solid #ccc;
  margin: 1em
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <select class="selectpicker pkg-class">
    <option value="">Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <hr/>
  <div class="col-sm-5">
    <input min="0" type="number" class="display-package-amount" class="form-control" placeholder="Amount">
  </div>
</div>
<div class="row">
  <select class="selectpicker pkg-class">
    <option value="">Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <hr/>
  <div class="col-sm-5">
    <input min="0" type="number" class="display-package-amount" class="form-control" placeholder="Amount">
  </div>
</div>