Javascript to change multiple <select> to same option chosen in first

Question

First time posting so I apologize for any etiquette errors.

I am trying to make an html page to replace a flash page for inspections of building sites. The current flash changes several of the fields to the same option as the Overall rating. The html I have so far is as follows:

<label for="inspectDate">
    Inspection Date:
</label>
<br>
<input type="date" id="inspectDate" name="inspectDate" class="xsmall">
<p>
    <label for="overallRating">Overall Rating
        <br>
        <select id="overallRating" name="overallRating">
            <option value="null"></option>
            <option value="good">Good</option>
            <option value="fair">Fair</option>
            <option value="poor">Poor</option>
        </select>
        <p>
            <label for="generalAppearance">General Appearance
                <br>
                <select id="generalAppearance" name="generalAppearance">
                    <option value="null"></option>
                    <option value="good">Good</option>
                    <option value="fair">Fair</option>
                    <option value="poor">Poor</option>
                    <option value="n/a">N/A</option>
                </select>
            </label>
        </p>
    </label>
</p>

I know very little js and am teaching myself as I go. If someone can help me with this first one I can extrapolate across as many select fields as I need to

Answer 1

Simplified demo:

 let bubu = document.querySelectorAll('.bubu'); // In JS count starts from 0. bubu[0] — the first element of the colletion. bubu[0].value = undefined; bubu[0].addEventListener('change', function(){ for( let i = 1; i < bubu.length; i++ ){ bubu[i].selectedIndex = this.selectedIndex; // `this` - the element, which fired the function. The same as `bubu[0]` } }); 

 select { width: 100px; } 

 <select class="bubu"> <option></option> <option>1</option> <option>2</option> <option>3</option> </select> - Main <hr><br><br><br><br> <select class="bubu"> <option></option> <option>1</option> <option>2</option> <option>3</option> <option>N/A</option> </select> - First <hr> <select class="bubu"> <option></option> <option>1</option> <option>2</option> <option>3</option> <option>N/A</option> </select> - Second