JSFiddle - React, Tailwind, and code Playground

by dshilkret

HTML

<!doctype html>
<title>val demo</title>
<p Name='p1'></p>
<p Name='p2'></p>
<p Name='p3'></p>
<p Name='p4'></p>
<p Name='p5'></p>


Selector 1: <input Name="t1" type="text" value=""> <br>
Selector 2: <input Name="t2" type="text" value=""><br>
Attribute 1: <input Name="t3" type="text" value='$("#box3").animate({height: "300px"});'
<br><br>
Attribute 2: <input Name="t4" type="text" value='$("#box3").animate({height: "100px"});'<br><br>
Stage: <input Name="t5" id="t5" type="text" value=""<br>
<textarea id="t_A"></textarea>



<button id="btn1">Animate height</button>
<button id="btn2">Reset height</button>
<button id="btnSet">Set Script</button>

<div id="box1" style="background:#98bf21;height:100px;width:100px;margin:6px;"></div>
<div id="box2" style="background:yellow;height:100px;width:100px;margin:6px;"></div>
<div id="box3" style="background:red;height:100px;width:100px;margin:6px;"></div>
   <script>
      
       $(document).ready(function(){
       $("#t5").keyup(function() {
    var value = this.value;
    var trimmed = $.trim(value);
    var subString = trimmed.substr(0, 10);
    $('#t_A').val(subString + suffix)
});
         $("input")
        .blur(function() {
       
         var value1 = $("[Name='t1']").val();
       var value2 = $("[Name='t2']").val();
        var value3 = $("[Name='t3']").val();
        var value4 = $("[Name='t4']").val();
        var value5 = $("[Name='t1']").val();
        var val6 = $("[Name='t5']").val('$("#box' + value2 + '").animate({height: "300px"});');
        $("[Name='p1']").text(value1);
        $("[Name='p2']").text(value2);
        $("[Name='p3']").text(value3);
        $("[Name='p4']").text(value4);
        $("[Name='t5']").val('$("#box' + value2 + '").animate({height: "300px"});');
       $("[Name='p5']").text(val6);
        $('textarea').val(val6);
       $('textarea').val(val6);
    })

   
    $("#btn1").click(function(){
        $("#box3").animate({height: "300px"});
    
         
    });
    
   ...