JSFiddle - React, Tailwind, and code Playground

by hobobne

HTML

<div class="auto_box">
    <b class="search_hotel"> //in .search_hotel everything true.
    <span></span>    
    <div class="mediumCell"><input type="text" style="border: none; float: right;" alt="<?= base_url();?>admin/tour/auto_complete" id="tour" class="auto_complete" name="search_hotel" placeholder="هتل" title="هتل" /></div>
    <ul class="list_autobox_hotel"></ul>
    </b>
</div>
<div class="auto_box">
    <b class="guide_search">
    <span></span>
    <div class="mediumCell"><input type="text" style="border: none; float: right;" alt="<?= base_url();?>admin/tour/auto_complete" id="tour" class="auto_complete" name="guide_search" placeholder="راهنما" title="ارلاین"></div>
    <ul class="list_autobox_guide"></ul>
    </b>
</div>

JavaScript

$('.auto_complete').keyup(function () {
        var specific = '.' + $(this).closest('div.auto_box').find('b').attr('class');
        var cl_list = '.' + $(this).closest('div.auto_box').find('ul').attr('class');
        //alert(cl_list)
        var id = '#' + this.id;
        var url = $(id).attr('alt')+ $(id).attr('id') + '/' + $(id).attr('class');                
        var dataObj = $(this).closest('form').serialize();
        $.ajax({
            type: "POST",
            url: $(id).attr('alt'),
            data: dataObj,
            cache: false,
            dataType: 'json',
            success: function (data) {
                //var cl_list = '.' + $('.auto_box '+ specific +' ul').attr('class');            
              $(cl_list).show().html('');
                if(data==0){
                    $(this).show().html('<li><b>وجود ندارد</b></li>').css('color','red');
                }else{


///////////////////////////////////here////////////////////////////////////
                    $.each(data, function(a,b){
                        alert(b.name) // in here alert worked and displaying result (b.name) true.
                        $('<li><a href="" id="' + b.name + '">' + b.name + '</a></li>').appendTo('.list_autobox_guide'); //in here appendTo not work for list_autobox_guide and not displaying result (b.name).                
                    });
//////////////////////////////////////////////////////////////////////////


                    $(cl_list + ' li a').click( function(e) {
                                        e.preventDefault();
                                        var ac = $(this).attr('id');                                
                                        $('<b>' + ac + '، <input type="text" name="hotel[]" value="' + ac + '" style="border: none; display: none;" /></b>').appendTo($('.auto_box ' + specific + ' span'));
                                        $(this).remove();
                                    return false;
 ...