JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="depart" style="width:500px; height:150px;">
<div id="te_veri">
<h3 id="te_ekle"><span>Phone and Email</span></h3>
<div><div style="display:inline-block;" id="tx1">Phone:</div> <input id="tx2" type="text" size="15" name="txl"  maxlength="20" ><br>

</div>
<h3 id="te_ekle2"><span>Phone and Email2</span></h3>
<div>
<a id="a2" href="javascript:void(0)" onclick="xy({'test':'acgsfdgd@vdvdf.com'})">Change maxLength2</a></div>
</div></div>

JavaScript

$(function() {
        $( "#te_veri" ).accordion({
            collapsible: true,
            heightStyle: "fill",
            active: 0
        });
    });
 
function xt() {
    $('#tx2').prop({
        'size': 6,
        'maxlength': 4
    }).val('');
   
}

function xy(txv) {
    $('#tx2').prop({
        'size': 35,
        'maxlength': 45
    }).val(txv.test);
    $('#tx1').html('Email:')
}

     $(document).ready(function(){
        xt(); 
     });