JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<div id="click" thesame="1">
    
    
    <!-- Clicks and does not perform function Click() -->
    <span> Title HI! </span>   
    
        <!-- Clicks and does not perform function Click() -->
    <div id="show_modal"> Show Modal Window </div>
    
</div>

CSS

#click{width: 220px;height:auto;background:#ccc;padding:15px;}

#click span, #click div{cursor:pointer;color:yellow;margin-top:15px;font-size:22px;background: green;}

JavaScript

$("#click").on("click", function(e){

    if (e.target.id != "click" ) return false;
    
    if($(this).attr("thesame") == 1){
        
        //Performs div is clicked on it and not on other elements within it. It's not working!
        
    }else{
        
        return false;
        
    }
    
alert("Hellow");
    
    $(this).css("background", "red");
    
    // Only if you clicked the div # click and not on other elements within this div. But is not working!? For up when you click on the div or span element inside the div # click it also performs the function, it is only if clicked on div # click and not on other elements within it.
    
    

    // and performs other functions that I will put
    
    
});