JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#detailBox" id="detailBox" name="detailBox">
	<div>
		<table >
			<tr>
				<td>
					<div  style="width:300px; heigth:300px;">
						<table  style="width:300px; display:none;" vertical-align="middle" >
							<tr >
								<td colspan="3">Servis Detayı</td>
							</tr>
							<tr>
								<td>Firma Adı</td>
								<td>:</td>
								<td><span id="firmName"></span></td>
							</tr>
							<tr >
								<td>İl / İlçe</td>
								<td>:</td>
								<td><span id="city"></span></td>
							</tr>
							<tr>
								<td>Durum</td>
								<td>:</td>
								<td><span id="durum"></span></td>
							</tr>
							<tr>
								<td>Servis Türü</td>
								<td>:</td>
								<td><span id="serviceType"></span></td>
							</tr>
							<tr>
								<td>Marka Id</td>
								<td>:</td>
								<td><span id="markaId"></span></td>
							</tr>
							
							<tr>
								<td>Yetkili Markalar</td>
								<td>:</td>
								<td><span id="models"></span></td>
							</tr>
							<tr>
								<td>Anlaşmalı Markalar</td>
								<td>:</td>
								<td><span id="dealModels"></span></td>
							</tr>
							<tr>
								<td>Sözleşme Tarihi</td>
								<td>:</td>
								<td><span id="date"></span></td>
							</tr>
							<tr>
								<td>Sigorta Şekli</td>
								<td>:</td>
								<td><span id="assurType"></span></td>
							</tr>
							<tr>
								<td>Telefon</td>
								<td>:</td>
								<td><span id="tel"></span></td>
							</tr>
							<tr>
								<td>Adres</td>
								<td>:</td>
								<td><span id="adres"></span></td>
							</tr>
							<tr>
								<td>Email</td>
								<td>:</td>
								<td><span id="email"></span></td>
							</tr>
							<tr>
								<td>İl</td>
								<td>:</td>
								<td><span id="il"></span></td>
							</tr>
							<tr>
								<td>İlçe</td>
								<td>:</td>
								<td><span id="ilce"></span></td>
							</tr>
							<tr>
								<td>Vergi Dairesi</td>
								<td>:</td>
								<td><span...

JavaScript

function showTable(){
    	tbodyElement  = $('#resultTable tbody');
    	jQuery('#searchResultContainer ul li').each(function(index){
    		var servis = jQuery.parseJSON($(this).html());
    		serviceResultList[index] = servis;
			css = i%2==0?'odd':'';
			var element = '<tr class="service">'+
			        '<td>'+servis.servisAdi+'</td>'+
    				'<td>'+servis.ilAdi+'-'+servis.ilce+'</td>'+
    				'<td>'+servis.servisTuru+'</td>'+
    				'<td>'+servis.tel+'</td>'+
    				'<td>'+servis.email+'</td>'+
    				'<td  class="detail" data-index="'+index+'">Detay</td></tr>';
    		tbodyElement.append(element);
    		if($("a#detailBox").length == 0){
    			$("a#detailBox").hide();
    		}else
    		 $('#resultTable').show();
    	});
    }
    $(".detail").live("click", function(event){
    	servisindex= $(this).attr('data-index');
    	var servis = serviceResultList[servisindex];
    	
    	$("a#detailBox #firmName").html(servis.adres);
    	$("a#detailBox #city").html(servis.ilce+' '+servis.ilAdi);
    	$("a#detailBox #durum").html(servis.durum);
    	$("a#detailBox #serviceType").html(servis.servisTuru);
    	$("a#detailBox #markaId").html(servis.markaId);
    	$("a#detailBox #models").html(servis.yetkiliMarkalar);
    	$("a#detailBox #dealModels").html(servis.anlasmaliMarkalar);
    	$("a#detailBox #date").html(servis.sozlesmeTarihi);
    	$("a#detailBox #assurType").html(servis.sigortaSekli);
    	$("a#detailBox #tel").html(servis.tel);
    	$("a#detailBox #adres").html(servis.adres);
    	$("a#detailBox #email").html(servis.email);
    	$("a#detailBox #il").html(servis.ilAdi);
    	$("a#detailBox #ilce").html(servis.ilce);
    	$("a#detailBox #vergiD").html(servis.vergiDairesi);
    	$("a#detailBox #vergiNo").html(servis.vergiNo);
    
    	initialize(servis.adres+' '+servis.ilce+' '+servis.ilAdi);
    	$("a#detailBox").fancybox({    		
        	hideOnOverlayClick: true,
            width: 960,
            height: 500,
            onStart:function(){
           ...