JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="floaterleft">
        <div class="headerTextBox">
            <input id="txtCostPageNumber" id="CostPageNumber" name="CostPageNumber" style="width: 240px; padding-right: 15px" type="text" value="" />
        </div>
        <div class="Magenifyingbtn, headerMagnifyButton">
            <input type="button" name="btnCostPageNumberMagnifingLens" id="btnCostPageNumberMagnifingLens" class="Magenifyingbtn">
        </div>

        <select id="mtxtCostPageDescription" name="mtxtCostPageDescription" multiple="multiple" style="width: 290px; padding: 10px 152px 0px 154px; float: right"></select>
    </div>
</body>

CSS

.floaterleft
    {
        width:300px;
        height:300px;
        background-color:gray;
        padding:10px 10px 10px 10px;

    }

JavaScript

$(document).ready(function () {
    $(function () {
        $("#btnCostPageNumberMagnifingLens").click(function () {
          
            $("#mtxtCostPageDescription").append('<option value=1>My option</option>');
            alert("q");
           
        });
    });
    });