Как адаптировать js код для множества почти идентичных элементов?

// В данный момент работает только для первой вариации
jQuery(document).ready(function ($) {
  var backorders = document.querySelectorAll("select#variable_backorders0");
  var stock_status = document.querySelectorAll("select#variable_stock_status0");
  $(stock_status).on('change', function() {
    var item = $(this).val();
    if ( item == "outofstock" || item == "instock") {
      document.querySelector(".pre-orders-date-var0").style.display = "none";
    } 
    else {
      document.querySelector(".pre-orders-date-var0").style.display = "block";
    }
  }).trigger('change');
  $(backorders).on('change', function() {
    var item = $(this).val();
    if ( item == "notify" || item == "yes") {
      document.querySelector(".pre-orders-date-var0").style.display = "block";
    } 
    else {
      document.querySelector(".pre-orders-date-var0").style.display = "none";
    }
  }).trigger('change');
}); 

.woocommerce_variations {
  padding: 20px;
  background-color: #ededed;
  font-size: 15px;
}

.woocommerce_variation {
  padding: 20px;
  background-color: #e3e3e3;
}

.woocommerce_variation:first-child {
  background-color: #f5f5f5;
}
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><b>Вариаций может быть неограниченное количество. Необходимо адаптировать условия в js для каждой вариации.</b></p>
<div class="woocommerce_variations">
  <div class="woocommerce_variation"><b>Первая вариация</b>
    <p>Если <b>#variable_backorders0 == notify || yes</b>, то <b>.pre-orders-date-var0</b> должет быть <b>display: block;</b>
      <br>Если == <b>"no"</b>, то <b>display: none;</b></p>
        <p><b>Если #variable_stock_status0 == onbackorder</b>, то <b>.pre-orders-date-var0</b> должет быть <b>display: block;</b>
      <br>Если <b>== outofstock || instock</b>, то <b>display: none;</b></p>
        <div class="woocommerce_variable_attributes">
            <div class="data">
                <div class="show_if_variation_manage_stock">
                    <input type="hidden" name="variable_original_stock[0]" value="420">
                    <p class="form-row form-row-last form-field variable_backorders0_field">
                        <label for="variable_backorders0">Разрешить предзаказы?</label>
                        <select style="" id="variable_backorders0" name="variable_backorders[0]" class="select short">  
                            <option value="no" selected="selected">Не разрешать</option>
                            <option value="notify">Разрешить, но уведомить клиента</option>
                            <option value="yes" >Разрешить</option>
                        </select>
            <b> #variable_backorders0</b>
                    </p>
                </div>
                <div>
                    <p class="form-row form-row-full variable_stock_status form-field variable_stock_status0_field">
                        <label for="variable_stock_status0">Статус наличия</label>
                        <select style="" id="variable_stock_status0" name="variable_stock_status[0]" class="select short">
                            <option value="instock" >В наличии</option>
                            <option value="outofstock" selected="selected">Нет в наличии</option>
                            <option value="onbackorder" >Предзаказ</option>
                        </select>
            <b># variable_stock_status0</b>
                    </p>
                    <p class="form-field _ps_pre_orders_date_var[406]_field form-row clear-both pre-orders-date-var0">
                        <label for="_ps_pre_orders_date_var[406]">Показать дату доставки</label>
                        <input type="number" class="short" name="_ps_pre_orders_date_var[406]" id="_ps_pre_orders_date_var[406]" placeholder="Введите количество дней">
            <b>.pre-orders-date-var0</b>
                    </p> 
                </div>
            </div>
        </div>
    </div>
  
  
    <div class="woocommerce_variation"><b>Вторая вариация</b>
    <p>Если <b>#variable_backorders1 == notify || yes</b>, то <b>.pre-orders-date-var1</b> должет быть <b>display: block;</b>
      <br>Если == <b>"no"</b>, то <b>display: none;</b></p>
        <p><b>Если #variable_stock_status1 == onbackorder</b>, то <b>.pre-orders-date-var1</b> должет быть <b>display: block;</b>
      <br>Если <b>== outofstock || instock</b>, то <b>display: none;</b></p>
        <div class="woocommerce_variable_attributes">
            <div class="data">
                <div class="show_if_variation_manage_stock">
                    <input type="hidden" name="variable_original_stock[1]" value="1">
                    <p class="form-row form-row-last form-field variable_backorders1_field">
                        <label for="variable_backorders1">Разрешить предзаказы?</label>
                        <select style="" id="variable_backorders1" name="variable_backorders[1]" class="select short">
                            <option value="no" selected="selected">Не разрешать</option>
                            <option value="notify">Разрешить, но уведомить клиента</option>
                            <option value="yes">Разрешить</option>
                        </select>
            <b> #variable_backorders1</b>
                    </p>
                </div>
                <div>
                    <p class="form-row form-row-full variable_stock_status form-field variable_stock_status1_field">
                        <label for="variable_stock_status1">Статус наличия</label>
                        <select style="" id="variable_stock_status1" name="variable_stock_status[1]" class="select short">
                            <option value="instock" selected="selected">В наличии</option>
                            <option value="outofstock">Нет в наличии</option>
                            <option value="onbackorder">Предзаказ</option>
                        </select>
            <b># variable_stock_status1</b>
                    </p>
                    <p class="form-field _ps_pre_orders_date_var[407]_field form-row clear-both pre-orders-date-var1">
                        <label for="_ps_pre_orders_date_var[407]">Показать дату доставки</label>
                        <input type="number" class="short" name="_ps_pre_orders_date_var[407]" id="_ps_pre_orders_date_var[407]" placeholder="Введите количество дней">
            <b>.pre-orders-date-var1</b>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>