JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mainleft">
    $(this) saved in var
    <ul>
        <li>World News</li>
        <li>Sports</li>
    </ul>
</div>
<div class="maincenter">
    $(this) saved in context
    <ul>
        <li>World News</li>
        <li>Sports</li>
    </ul>
</div>
<div class="mainright">
    $(this) out of scope -> null in alert
    <ul>
        <li>World News</li>
        <li>Sports</li>
    </ul>
</div>

JavaScript

$(document).ready(function() {
    $(".mainleft > ul > li").click(function(){
        var liText = $(this).text();
        $.ajax({
            type: "POST",
            url: "/echo/html/",
            data: liText,
            success: function(msg){
                alert(liText);  // this alert fires but the result is blank
            }
        });
    });
    $(".maincenter > ul > li").click(function(){
        $.ajax({
            type: "POST",
            url: "/echo/html/",
            context: this,
            data: $(this).text(),
            success: function(msg){
                alert($(this).text());  // this alert fires but the result is blank
            }
        });
    });
    $(".mainright > ul > li").click(function(){
        $.ajax({
            type: "POST",
            url: "/echo/html/",
            data: $(this).text(),
            success: function(msg){
                alert($(this).text());  // this alert fires but the result is blank
            }
        });
    });
});