JSFiddle - React, Tailwind, and code Playground

by Satinder singh

HTML

<div id="btn">Add ddl</div>
<br/>
<br/>
<div class="containerDiv">
    <table id="myTable">
        <tr>
            <th>Info</th>
        </tr>
    </table>
</div>

CSS

#btn {
     background: none repeat scroll 0 0 #36A9E1;
     color: #FFFFFF;
     border: medium none;
     border-radius: 2px 2px 2px 2px;
     text-shadow: none;
     font-size: 17.5px;
     padding: 11px 19px;
     width:70px;
 }

JavaScript

$("#btn").on('click', function () {
    var arr = ['Molly', 'Andrea', 'Amit', 'John'];
    var data_generated = "";

    for (var i = 0; i < 4; i++) {
        var generate_ddl = '<select><option value="John">John</option><option value="Amit">Amit</option><option value="Molly">Molly</option> <option value="Andrea">Andrea</option></select>';

        var setValueTrue = arr[i];
        var da='value=\"'+arr[i]+'\"';
        var set_Val='selected=\"true\" '+da +'';
        var updated_ddl=generate_ddl.replace(da,set_Val);
        
        alert(set_Val);
        var generate_div = '<div>Person Name: ' + updated_ddl + '</div>';
        data_generated += '<tr> <td>' + generate_div + '</td> </tr>';
    }

    $("#myTable").append(data_generated);


});