我正在使用forEach循环从数据创建动态引导列表组。在创建的动态列表组中包含一些select元素。我为每个select元素设置了一个on change侦听器，它将选择的第一个值复制到其他列表组中的所有其他select元素。然后，我用。off（）移除on change侦听器，这样，如果用户不希望选择元素的值与选择的第一个值相同，他们就可以更改任何选择元素的值。我试图获取select元素的值，并将它们放在按钮上的数据属性中，以便稍后用于ajax调用。我的问题是，如果我试图更改其中一个select元素的值以将其放入数据属性中，则数据属性值仍然接受所选的第一个值，而不是新值。

这是我的HTML输出的一个示例。在本例中，我重点关注列表组中的中间元素，其类为“reason”，每个列表组底部的按钮为“submit”。如果我想将list-group 4的值更改为three，而不是one，我还希望submit按钮上的data-reason的数据属性更改为three。但是，每当我更改该值时，data属性不会从所选的第一个值开始更改。

<div class="row">
   <div class="col-md-4">
      **//list-group 1**
      <ol class="list-group list-group-numbered mb-4">
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Replacement</div>
               <p>0 =&gt; 4910</p>
            </div>
            <span class="badge bg-primary rounded-pill">2020-05-24</span>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Steward</div>
               <select class="form-select steward">
                  <option disabled="" selected="">Choose...</option>
                  <option>Grace Hsieh</option>
                  <option>Matt Stevens</option>
                  <option>Meagan Jones</option>
               </select>
            </div>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Reason</div>
               <select class="form-select reason" id="4910">
                  <option disabled="" selected="">Choose...</option>
                  <option value="1">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
               </select>
            </div>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Notes</div>
               <textarea class="notes" rows="4" cols="45"></textarea>
               <hr>
               <div class="text-end">
                  <button data-replacement="4910" data-date="2020-05-24" type="button" class="btn btn-success submit" data-reason="1">Submit</button>
               </div>
            </div>
         </li>
      </ol>
   </div>
   <div class="col-md-4">
      **//list-group 2**
      <ol style="border-color: red" class="list-group list-group-numbered mb-4">
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Replacement</div>
               <p>0 =&gt; 9183</p>
            </div>
            <span class="badge bg-primary rounded-pill">2020-05-25</span>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Steward</div>
               <select class="form-select steward">
                  <option disabled="" selected="">Choose...</option>
                  <option>Grace Hsieh</option>
                  <option>Matt Stevens</option>
                  <option>Meagan Jones</option>
               </select>
            </div>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Reason</div>
               <select class="form-select reason" id="9183">
                  <option disabled="" selected="">Choose...</option>
                  <option value="1">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
               </select>
            </div>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Notes</div>
               <textarea class="notes" rows="4" cols="45"></textarea>
               <hr>
               <div class="text-end">
                  <button data-replacement="9183" data-date="2020-05-25" type="button" class="btn btn-success submit" data-reason="1">Submit</button>
               </div>
            </div>
         </li>
      </ol>
   </div>
   <div class="col-md-4">
      **//list-group 3**
      <ol style="border-color: red" class="list-group list-group-numbered mb-4">
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Replacement</div>
               <p>0 =&gt; 7474</p>
            </div>
            <span class="badge bg-primary rounded-pill">2020-05-26</span>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Steward</div>
               <select class="form-select steward">
                  <option disabled="" selected="">Choose...</option>
                  <option>Grace Hsieh</option>
                  <option>Matt Stevens</option>
                  <option>Meagan Jones</option>
               </select>
            </div>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Reason</div>
               <select class="form-select reason" id="7474">
                  <option disabled="" selected="">Choose...</option>
                  <option value="1">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
               </select>
            </div>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Notes</div>
               <textarea class="notes" rows="4" cols="45"></textarea>
               <hr>
               <div class="text-end">
                  <button data-replacement="7474" data-date="2020-05-26" type="button" class="btn btn-success submit" data-reason="1">Submit</button>
               </div>
            </div>
         </li>
      </ol>
   </div>
   <div class="col-md-4">
      **//list-group 4**
      <ol style="border-color: red" class="list-group list-group-numbered mb-4">
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Replacement</div>
               <p>0 =&gt; 8186</p>
            </div>
            <span class="badge bg-primary rounded-pill">2020-05-27</span>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Steward</div>
               <select class="form-select steward">
                  <option disabled="" selected="">Choose...</option>
                  <option>Grace Hsieh</option>
                  <option>Matt Stevens</option>
                  <option>Meagan Jones</option>
               </select>
            </div>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Reason</div>
               <select class="form-select reason" id="8186">
                  <option disabled="" selected="">Choose...</option>
                  <option value="1">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
               </select>
            </div>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Notes</div>
               <textarea class="notes" rows="4" cols="45"></textarea>
               <hr>
               <div class="text-end">
                  <button data-replacement="8186" data-date="2020-05-27" type="button" class="btn btn-success submit" data-reason="1">Submit</button>
               </div>
            </div>
         </li>
      </ol>
   </div>
</div>

这是on change函数之一。我试图获取每个单独的select元素的值，方法是获取id，然后用id值设置.submit元素的数据属性。这不起作用，因为data属性仍然设置为所选的第一个值。对于如何实现这一目标的任何建议，我将不胜感激！

<div class="row">
   <div class="col-md-4">
      **//list-group 1**
      <ol class="list-group list-group-numbered mb-4">
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Replacement</div>
               <p>0 =&gt; 4910</p>
            </div>
            <span class="badge bg-primary rounded-pill">2020-05-24</span>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Steward</div>
               <select class="form-select steward">
                  <option disabled="" selected="">Choose...</option>
                  <option>Grace Hsieh</option>
                  <option>Matt Stevens</option>
                  <option>Meagan Jones</option>
               </select>
            </div>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Reason</div>
               <select class="form-select reason" id="4910">
                  <option disabled="" selected="">Choose...</option>
                  <option value="1">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
               </select>
            </div>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Notes</div>
               <textarea class="notes" rows="4" cols="45"></textarea>
               <hr>
               <div class="text-end">
                  <button data-replacement="4910" data-date="2020-05-24" type="button" class="btn btn-success submit" data-reason="1">Submit</button>
               </div>
            </div>
         </li>
      </ol>
   </div>
   <div class="col-md-4">
      **//list-group 2**
      <ol style="border-color: red" class="list-group list-group-numbered mb-4">
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Replacement</div>
               <p>0 =&gt; 9183</p>
            </div>
            <span class="badge bg-primary rounded-pill">2020-05-25</span>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Steward</div>
               <select class="form-select steward">
                  <option disabled="" selected="">Choose...</option>
                  <option>Grace Hsieh</option>
                  <option>Matt Stevens</option>
                  <option>Meagan Jones</option>
               </select>
            </div>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Reason</div>
               <select class="form-select reason" id="9183">
                  <option disabled="" selected="">Choose...</option>
                  <option value="1">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
               </select>
            </div>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Notes</div>
               <textarea class="notes" rows="4" cols="45"></textarea>
               <hr>
               <div class="text-end">
                  <button data-replacement="9183" data-date="2020-05-25" type="button" class="btn btn-success submit" data-reason="1">Submit</button>
               </div>
            </div>
         </li>
      </ol>
   </div>
   <div class="col-md-4">
      **//list-group 3**
      <ol style="border-color: red" class="list-group list-group-numbered mb-4">
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Replacement</div>
               <p>0 =&gt; 7474</p>
            </div>
            <span class="badge bg-primary rounded-pill">2020-05-26</span>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Steward</div>
               <select class="form-select steward">
                  <option disabled="" selected="">Choose...</option>
                  <option>Grace Hsieh</option>
                  <option>Matt Stevens</option>
                  <option>Meagan Jones</option>
               </select>
            </div>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Reason</div>
               <select class="form-select reason" id="7474">
                  <option disabled="" selected="">Choose...</option>
                  <option value="1">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
               </select>
            </div>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Notes</div>
               <textarea class="notes" rows="4" cols="45"></textarea>
               <hr>
               <div class="text-end">
                  <button data-replacement="7474" data-date="2020-05-26" type="button" class="btn btn-success submit" data-reason="1">Submit</button>
               </div>
            </div>
         </li>
      </ol>
   </div>
   <div class="col-md-4">
      **//list-group 4**
      <ol style="border-color: red" class="list-group list-group-numbered mb-4">
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Replacement</div>
               <p>0 =&gt; 8186</p>
            </div>
            <span class="badge bg-primary rounded-pill">2020-05-27</span>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Steward</div>
               <select class="form-select steward">
                  <option disabled="" selected="">Choose...</option>
                  <option>Grace Hsieh</option>
                  <option>Matt Stevens</option>
                  <option>Meagan Jones</option>
               </select>
            </div>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Reason</div>
               <select class="form-select reason" id="8186">
                  <option disabled="" selected="">Choose...</option>
                  <option value="1">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
               </select>
            </div>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Notes</div>
               <textarea class="notes" rows="4" cols="45"></textarea>
               <hr>
               <div class="text-end">
                  <button data-replacement="8186" data-date="2020-05-27" type="button" class="btn btn-success submit" data-reason="1">Submit</button>
               </div>
            </div>
         </li>
      </ol>
   </div>
</div>

如果有用的话，下面是我创建列表组的方法

<div class="row">
   <div class="col-md-4">
      **//list-group 1**
      <ol class="list-group list-group-numbered mb-4">
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Replacement</div>
               <p>0 =&gt; 4910</p>
            </div>
            <span class="badge bg-primary rounded-pill">2020-05-24</span>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Steward</div>
               <select class="form-select steward">
                  <option disabled="" selected="">Choose...</option>
                  <option>Grace Hsieh</option>
                  <option>Matt Stevens</option>
                  <option>Meagan Jones</option>
               </select>
            </div>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Reason</div>
               <select class="form-select reason" id="4910">
                  <option disabled="" selected="">Choose...</option>
                  <option value="1">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
               </select>
            </div>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Notes</div>
               <textarea class="notes" rows="4" cols="45"></textarea>
               <hr>
               <div class="text-end">
                  <button data-replacement="4910" data-date="2020-05-24" type="button" class="btn btn-success submit" data-reason="1">Submit</button>
               </div>
            </div>
         </li>
      </ol>
   </div>
   <div class="col-md-4">
      **//list-group 2**
      <ol style="border-color: red" class="list-group list-group-numbered mb-4">
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Replacement</div>
               <p>0 =&gt; 9183</p>
            </div>
            <span class="badge bg-primary rounded-pill">2020-05-25</span>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Steward</div>
               <select class="form-select steward">
                  <option disabled="" selected="">Choose...</option>
                  <option>Grace Hsieh</option>
                  <option>Matt Stevens</option>
                  <option>Meagan Jones</option>
               </select>
            </div>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Reason</div>
               <select class="form-select reason" id="9183">
                  <option disabled="" selected="">Choose...</option>
                  <option value="1">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
               </select>
            </div>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Notes</div>
               <textarea class="notes" rows="4" cols="45"></textarea>
               <hr>
               <div class="text-end">
                  <button data-replacement="9183" data-date="2020-05-25" type="button" class="btn btn-success submit" data-reason="1">Submit</button>
               </div>
            </div>
         </li>
      </ol>
   </div>
   <div class="col-md-4">
      **//list-group 3**
      <ol style="border-color: red" class="list-group list-group-numbered mb-4">
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Replacement</div>
               <p>0 =&gt; 7474</p>
            </div>
            <span class="badge bg-primary rounded-pill">2020-05-26</span>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Steward</div>
               <select class="form-select steward">
                  <option disabled="" selected="">Choose...</option>
                  <option>Grace Hsieh</option>
                  <option>Matt Stevens</option>
                  <option>Meagan Jones</option>
               </select>
            </div>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Reason</div>
               <select class="form-select reason" id="7474">
                  <option disabled="" selected="">Choose...</option>
                  <option value="1">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
               </select>
            </div>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Notes</div>
               <textarea class="notes" rows="4" cols="45"></textarea>
               <hr>
               <div class="text-end">
                  <button data-replacement="7474" data-date="2020-05-26" type="button" class="btn btn-success submit" data-reason="1">Submit</button>
               </div>
            </div>
         </li>
      </ol>
   </div>
   <div class="col-md-4">
      **//list-group 4**
      <ol style="border-color: red" class="list-group list-group-numbered mb-4">
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Replacement</div>
               <p>0 =&gt; 8186</p>
            </div>
            <span class="badge bg-primary rounded-pill">2020-05-27</span>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Steward</div>
               <select class="form-select steward">
                  <option disabled="" selected="">Choose...</option>
                  <option>Grace Hsieh</option>
                  <option>Matt Stevens</option>
                  <option>Meagan Jones</option>
               </select>
            </div>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Reason</div>
               <select class="form-select reason" id="8186">
                  <option disabled="" selected="">Choose...</option>
                  <option value="1">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
               </select>
            </div>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Notes</div>
               <textarea class="notes" rows="4" cols="45"></textarea>
               <hr>
               <div class="text-end">
                  <button data-replacement="8186" data-date="2020-05-27" type="button" class="btn btn-success submit" data-reason="1">Submit</button>
               </div>
            </div>
         </li>
      </ol>
   </div>
</div>

顺晟科技：

因为您用移除更改侦听器，所以当然只在第一次更改时设置。您可以保留变更侦听器，并在第一次变更后将属性设置为所有相关的select元素。在此之后，检查是否是第一次更改或之后的任何更改。

所以您可以做类似的事情来实现您想要的（我希望我答对了您的问题）:

<div class="row">
   <div class="col-md-4">
      **//list-group 1**
      <ol class="list-group list-group-numbered mb-4">
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Replacement</div>
               <p>0 =&gt; 4910</p>
            </div>
            <span class="badge bg-primary rounded-pill">2020-05-24</span>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Steward</div>
               <select class="form-select steward">
                  <option disabled="" selected="">Choose...</option>
                  <option>Grace Hsieh</option>
                  <option>Matt Stevens</option>
                  <option>Meagan Jones</option>
               </select>
            </div>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Reason</div>
               <select class="form-select reason" id="4910">
                  <option disabled="" selected="">Choose...</option>
                  <option value="1">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
               </select>
            </div>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Notes</div>
               <textarea class="notes" rows="4" cols="45"></textarea>
               <hr>
               <div class="text-end">
                  <button data-replacement="4910" data-date="2020-05-24" type="button" class="btn btn-success submit" data-reason="1">Submit</button>
               </div>
            </div>
         </li>
      </ol>
   </div>
   <div class="col-md-4">
      **//list-group 2**
      <ol style="border-color: red" class="list-group list-group-numbered mb-4">
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Replacement</div>
               <p>0 =&gt; 9183</p>
            </div>
            <span class="badge bg-primary rounded-pill">2020-05-25</span>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Steward</div>
               <select class="form-select steward">
                  <option disabled="" selected="">Choose...</option>
                  <option>Grace Hsieh</option>
                  <option>Matt Stevens</option>
                  <option>Meagan Jones</option>
               </select>
            </div>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Reason</div>
               <select class="form-select reason" id="9183">
                  <option disabled="" selected="">Choose...</option>
                  <option value="1">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
               </select>
            </div>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Notes</div>
               <textarea class="notes" rows="4" cols="45"></textarea>
               <hr>
               <div class="text-end">
                  <button data-replacement="9183" data-date="2020-05-25" type="button" class="btn btn-success submit" data-reason="1">Submit</button>
               </div>
            </div>
         </li>
      </ol>
   </div>
   <div class="col-md-4">
      **//list-group 3**
      <ol style="border-color: red" class="list-group list-group-numbered mb-4">
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Replacement</div>
               <p>0 =&gt; 7474</p>
            </div>
            <span class="badge bg-primary rounded-pill">2020-05-26</span>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Steward</div>
               <select class="form-select steward">
                  <option disabled="" selected="">Choose...</option>
                  <option>Grace Hsieh</option>
                  <option>Matt Stevens</option>
                  <option>Meagan Jones</option>
               </select>
            </div>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Reason</div>
               <select class="form-select reason" id="7474">
                  <option disabled="" selected="">Choose...</option>
                  <option value="1">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
               </select>
            </div>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Notes</div>
               <textarea class="notes" rows="4" cols="45"></textarea>
               <hr>
               <div class="text-end">
                  <button data-replacement="7474" data-date="2020-05-26" type="button" class="btn btn-success submit" data-reason="1">Submit</button>
               </div>
            </div>
         </li>
      </ol>
   </div>
   <div class="col-md-4">
      **//list-group 4**
      <ol style="border-color: red" class="list-group list-group-numbered mb-4">
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Replacement</div>
               <p>0 =&gt; 8186</p>
            </div>
            <span class="badge bg-primary rounded-pill">2020-05-27</span>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Steward</div>
               <select class="form-select steward">
                  <option disabled="" selected="">Choose...</option>
                  <option>Grace Hsieh</option>
                  <option>Matt Stevens</option>
                  <option>Meagan Jones</option>
               </select>
            </div>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Reason</div>
               <select class="form-select reason" id="8186">
                  <option disabled="" selected="">Choose...</option>
                  <option value="1">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
               </select>
            </div>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
               <div class="fw-bold">Notes</div>
               <textarea class="notes" rows="4" cols="45"></textarea>
               <hr>
               <div class="text-end">
                  <button data-replacement="8186" data-date="2020-05-27" type="button" class="btn btn-success submit" data-reason="1">Submit</button>
               </div>
            </div>
         </li>
      </ol>
   </div>
</div>

工作小提琴:https://jsfiddle.net/uoavkhqe/14/