JSFiddle - React, Tailwind, and code Playground

HTML

<div id="orange"> 
<input type="text" class="hide" value="AM" />
        <select class="ampm">
            <option value="AM">AM</option>
            <option value="PM">PM</option>
        </select>
<br>    
  <input type="text" class="hide" value="AM" />
        <select class="ampm">
            <option value="AM">AM</option>
            <option value="PM">PM</option>
        </select>
<br>    
<input type="text" class="hide" value="PM" />
        <select class="ampm">
            <option value="AM">AM</option>
            <option value="PM">PM</option>
        </select>    
</div>
    
<div id="apple"> 
<input type="text" class="hide" value="AM" />
        <select class="ampm">
            <option value="AM">AM</option>
            <option value="PM">PM</option>
        </select>
<br>        
<input type="text" class="hide" value="PM" />
        <select class="ampm">
            <option value="AM">AM</option>
            <option value="PM">PM</option>
        </select>    
</div>

JavaScript

$(function () {
    $('div').each(function(){
        $(this).find('.hide').each(function () {
             $(this).find('.ampm').val($(this).val());                         
             alert($(this).val());
         });    
    });
});