JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css">
<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

$("#t1pl1").chosen();

$('#t1pl1').next('.chosen-container').on('mouseenter', 'li.active-result.highlighted', function(e) {
      $("#pid").html($("#t1pl1 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);
        }


    });