JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <select name="monfrom" id="monfrom">
        <option value="00:30">00:30</option>
        <option value="01:30">01:30</option>
        <option value="02:30">02:30</option>
    </select>
    <select name="monto" id="monto">
        <option value="00:30">00:30</option>
        <option value="01:30">01:30</option>
        <option value="02:30">02:30</option>
    </select>
    <button type="button" id="apply">Apply to all</button>
</div>
<div>
    <select name="tuefrom" id="tuefrom">
        <option value="00:30">00:30</option>
        <option value="01:30">01:30</option>
        <option value="02:30">02:30</option>
    </select>
    <select name="tueto" id="tueto">
        <option value="00:30">00:30</option>
        <option value="01:30">01:30</option>
        <option value="02:30">02:30</option>
    </select>
</div>
<div>
    <select name="wedfrom" id="wedfrom">
        <option value="00:30">00:30</option>
        <option value="01:30">01:30</option>
        <option value="02:30">02:30</option>
    </select>
    <select name="wedto" id="wedto">
        <option value="00:30">00:30</option>
        <option value="01:30">01:30</option>
        <option value="02:30">02:30</option>
    </select>
</div>

CSS

div {
    margin:20px;
    float: left;
    clear:both;
}
div:first-of-type{
    border:1px solid black;
}

JavaScript

function applyAll() {
    var monfrom = document.querySelectorAll('select[name$="from"]');
    var monto = document.querySelectorAll('select[name$="to"]');
    for (i = 0; i < monfrom.length; i++) {
        monfrom[i].value = monfrom[0].value;
    };
    for (i = 0; i < monto.length; i++) {
        monto[i].value = monto[0].value;
    };
};
window.onload = function () {
    var apply = document.getElementById('apply');
    apply.addEventListener('click', applyAll);
};