JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http:////ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<button id="one">Button 1</button>
<button id="two">Button 2</button>
<button id="three">Button 3</button>
<button id="four">Button 4</button>
<button id="five">Button 5</button>
<button id="six">Button 6</button>
<button id="seven">Button 7</button>
<button id="eight">Button 8</button>
<button id="nine">Button 9</button>

JavaScript

function alert_three(){
        alert('three');
    }

    var alert_four = function(){
        alert('four');
    };

    function alert_five(){
        alert('five');
    }

    var alert_five = alert_five();
    //this will alert five right away, because we call to the function alert five, which does not return anything but creates an alert box.

    var alert_six = function alert_six(){
        alert('six');
    };

    $('#one').click( function(){
        alert('one');
    });
    //this will work correctly.

    $('#two').click( alert('two') );
    //this will alert two right away, because...?
    //it wont do anything else on click

    $('#three').click( alert_three() );
    //this will alert three right away, because...?
    //it wont do anything else on click

    $('#four').click( alert_four );
    //this will work correctly.

    $('#five').click( alert_five );
    //this wont do anything else on click

    $('#six').click( alert_six );
    //this will work correctly.

    $('#seven').click( function alert_seven(){
        alert('seven');
    });
    //this will work correctly.

    function alert_eight(){
		return function(){
			alert('eight');
		}
	}
		
	$('#eight').click( alert_eight() );
    //this will work correctly		
		
	function alert_nine(){
		alert('nine');
	}
		
	$('#nine').click( alert_nine );	
    //this will work correctly