JSFiddle - React, Tailwind, and code Playground

by tebrown

HTML

<b>Select Try Scorers</b>
                                                <a href="#" class="add-player" id="add">Add</a>
                                                    <div class="info-hide"><p><i>Press the plus button to add the players who scored during the match. If more than 2 players have scored, select the player twice. </i></p></div>
            <div id="selextender">
                
                <div id="player-list"><select name="players[]" style="margin-left:10px;width: 100px;"><option value="1">Joe Bloggs</option><option value="2">2</option><option value="3">3</option></select>
                </div>
                
           </div>

JavaScript

$(window).load(function(){
        $('#player-list').hide();
$(function() {
  

    //add select 
    $('a#add').click(function() {
    $('.info-hide').hide();

$('#player-list').fadeIn("fast").appendTo('#selextender');     
        $('<select name="count[]" style="margin-left:10px;width: 50px;"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><a href="#" class="remove-player"><i class="icon-remove"></i></a>').fadeIn("fast").appendTo('#selextender');         
        return false;
    } );

    //fadeout selected item and remove
    $('.remove-player').live('click', function() {

        $(this).parent().fadeOut(function(){ 
    
            $($this).empty();

            return false;

        });

    });

});
});//]]>