JSFiddle - React, Tailwind, and code Playground

by VajdaS

HTML

<h1>Good</h1>
            <select id="drop1">
                <option>None</option>
                <option>Bill</option>
                <option>Steve</option>
                <option>Harry</option>
               
            </select>
            <br/>
            <select id="drop2">
               
                <option>None</option>
                 <option>Sue</option>
                <option>Mary</option>
                <option>Sally</option>
               
            </select>
             <br/>
             
         <h1>Bad</h1>
            <select id="cbo1">
                <option>None</option>
                <option>Bill</option>
                <option>Steve</option>
                <option>Harry</option>
               
            </select>
            <br/>
            <select id="cbo2">
               
                <option>None</option>
                 <option>Sue</option>
                <option>Mary</option>
                <option>Sally</option>
               
            </select>
             <br/>

CSS

body
       {
           margin:5em;
       }
       
       div
       {
           padding:2em;
           border:1px solid black;
           width:50em;
       }
       
       select
       {
           width:20em;
       }

JavaScript

$(document).ready(function () {
            //GOOD
           $("[id*=drop1]").prepend("<option selected='true'>CHOOSE</option>");
           $("[id*=drop2]").prepend("<option selected='true'>CHOOSE</option>");
           
           //BAD
             var cbos = $("[id*=cbo]")
            $.each(cbos, function (index, item) {
            $(item[0]).prepend("<option value='' selected='selected'>CHOOSE</option>")
                });
           
           
              
            
        });