JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Readonly Attribute</h1>
<div class="divclick" height="100px" width="200px" style="background:red;">
        <input type="text" readonly=true>
    </div>
    <h1>Z-index</h1>
    <div class="divclick1" height="100px" width="200px" style="background:red;">
        <input type="text" disabled>
    </div>

CSS

div.divclick1{
    width:500px;
    position: absolute;
    
}
div.divclick1 input{
    position: relative;
    z-index:-1;
}

JavaScript

$(document).ready(function(){
            $(".divclick ").click(function(){
                alert("readonly");
               
            });
    $(".divclick1 ").click(function(){
                alert("z-index");
                $(this).find('input').css('z-index',0)
            });
        });