jQuery multiple identical section disable submit button on select menu option

Question

I have multiple blocks such as:

{% for section in range %}
<div class="row">
  <div class="col">
    
    <select name="download_option" id="download_option" >
      <option value="">Select</option>
      {% for element in listOfOption %}
      <option value="{{ element }}">{{element}}</option>
      {% endfor %}
    </select>
    
    <button id="download_submit" name="download_submit" type="submit" value={{ section }} disabled>Generate</button><br><br>
    
  </div>
  
</div>
{% endfor %}

In order to not allow submission if no option is selected in the select menu (text = 'Select', val = ''), I use jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
  $(document).ready(function(){
    $('#download_option').on("change",function(){
      if($(this).val() == ''){
        $('#download_submit').attr('disabled','disabled');
      }else{
        $('#download_submit').removeAttr('disabled');
      }
    });
  });
</script>

This code will work as expected: enabling the submit button if select option is different than the default.

However, it will work only for the first block. For all others, the button will remain disabled. So I would like a way to use a "parent" function or anything to make it working for all blocks accross the document.

Edit:

Found the solution:

<script>
  $(document).ready(function(){
    $('select').on("change",function(){
        if($(this).val() == ''){
            $(this).parent().find('button:submit').attr('disabled','disabled'); //Disables if Values of Select Empty
        }else{
            $(this).parent().find('button:submit').removeAttr('disabled');
        }
    });
  });
</script>

Answer 1

You are not following the HTML Standard by reusing id:s , download_option and download_submit . You should either remove them or add an unique suffix, the index or similar. If you add a unique index as a suffix you can change the selector to something like $("[id^=download_option]") to select all options. Then parse the index from that node to determine the complete id of the submit-button.