JSFiddle - React, Tailwind, and code Playground

by Kabir Hossain

HTML

<script src="http://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css">
<p>Add more according to input number:</p>
<input type="text" value="1" id="t1pladdcount" />
<button id="t1addpl">Add Player</button>Persons in List: <span id="t1plcount" style="color:green">1</span> &nbsp;&nbsp;&nbsp; Id :<span id="pid" style="color:blue;">0</span>

<br/>
<br/>
<div id="t1pls">
    <select id="t1pl1" class="chosen-select" data-placeholder="Select player..." style="width:200px;">
        <option value="0"></option>
        <option value="11">Player 1</option>
        <option value="12">Player 2</option>
        <option value="13">Player 3</option>
    </select>
</div>

JavaScript

$(document).ready(function () {
    $("#t1pl1").chosen();

    $(document).on('mouseenter', 'li.active-result.highlighted', function (e) {
        $("#pid").html($("option").eq($(this).data("option-array-index")).val());
    });


    $("#t1addpl").click(function () {
        var newcontent = '';
        var beforecontent = '<select id="t1pl1" class="chosen-select" data-placeholder="Select player..." style="width:200px">';

        try {
            var toadd = parseInt($("#t1pladdcount").val());
            var currcount = parseInt($("#t1plcount").text());
            var i = 1;

            for (i = 1; i <= toadd; i++) {
                newcontent = beforecontent + $("#t1pl1").html();
                $("#t1pls").append("<br/>" + newcontent.replace(/t1f1/g, "t1f" + (currcount + i)).replace(/t1p1/g, "t1p" + (currcount + i)).replace(/t1pl1/g, "t1pl" + (currcount + i)));
                $("#t1pl" + (currcount + i)).chosen(); // apply chosen to select box
            } // end of for loop
            $("#t1plcount").text("" + (currcount + toadd));
            $("#t1pladdcount").val("1");


        } catch (e) {
            console.log(e);
        }

    });
    $(document).on('change', 'select[id^="t1"]', function () {
        alert($(this).val());
    });
});