JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width: 680px;">
<div class="maxi-div">
<div class="caption">QAM ile kanal paketleri nasıl yapılıyor burada deneyerek görebilirsiniz</div>
</div>
<div class="maxi-div">
<div class="baslik">
<div class="kanallar uydu">
<b>TP 1:TRT HD Paket 11054 V 30000</b><ul>
             <span>-- TRT HD</span><br />
             <span>-- TRT 1 HD</span><br />
             <span>-- TRT HABER HD</span><br />
             <span>-- TRT SPOR HD</span><br />
             <span>-- TRT BELGESEL HD</span><br />
</ul></div>
<div class="kanallar uydu">
<b>TP 2: Doğus Grubu Paket 12015 H 27500</b><ul>
             <span>-- STAR TV</span><br />
             <span>-- NTV TÜRKİYE</span><br />
             <span>-- NTV SPOR</span><br />
             <span>-- CNBS-E</span><br />
             <span>-- E2</span><br />
</ul></div>
<div class="kanallar uydu">
<b>TP 3: Turkuvaz Medya Paket 12053 H 27500</b><ul>
             <span>-- ATV TÜRKİYE</span><br />
             <span>-- A HABER</span><br />
             <span>-- A SPOR</span><br />
             <span>-- MİNİKA ÇOCUK</span><br />
             <span>-- MİNİKAGO</span><br />
             <span>-- ATV HD</span><br />
             <span>-- A HABER HD</span><br />
             <span>-- A SPOR HD</span><br />
</ul></div>
<div class="kanallar uydu">
<b>TP 4: Kanal 7 HD Paket 12013 H 08333</b><ul>
             <span>-- KANAL 7 HD TÜRKİYE</span><br />
             <span>-- ÜLKE TV HD</span><br />
</ul></div>
<div class="kanallar uydu">
<b>TP 5: Show TV HD Paket 12209 H 10000</b><ul>
             <span>-- SHOW TV HD</span><br />
             <span>-- HABERTÜRK HD</span><br />
</ul></div>
<div class="kanallar uydu">
<b>TP 6: D-SMART 12245 H 27500</b><ul>
             <span>-- CNNTÜRK HD</span><br />
             <span>-- TV2 HD</span><br />
</ul></div>
<div class="kanallar uydu">
<b>TP 7: TürkSat Paket 12 Batı 12380 V 27500</b><ul>
             <span>-- BEYAZ TV</span><br />
             <span>-- BEYAZ TV HD</span><br />
            ...

CSS

span, aside {
    cursor:default;
}
.maxi-div{
overflow:hidden;
display:table;
border:1px solid #FFFFFF;
background-color:#E1E4F2 ;    
}

.caption {
border:1px solid #FFFFFF;
background-color:#E1E4F2 ;    
display: table-cell;
vertical-align:middle;
background-color:#ADB6DC;
font-family: Verdane, Helvetica, Arial, Sans-Serif;
font-size: 14pt;
font-weight: bold;
text-align: center;    
color: #000000;    
width: 680px;
padding:3px;
}
.baslik{
border:1px solid #FFFFFF;
background-color:#E1E4F2 ;    
display: table-cell;
vertical-align:middle;
background-color:#ADB6DC;
font-family: Verdane, Helvetica, Arial, Sans-Serif;
font-size: 10pt;
//font-weight: bold;
color: #000000;
padding:3px;
//text-align: center;
//width: 680px;	
}
.uydu {
border:1px solid #FFFFFF;
background-color:#E1E4F2 ;    
width: 290px;
}
.butonlar {    
vertical-align:middle;
width: 150px;
text-align: center;
}
.qamtablo {
border:1px solid #FFFFFF;
background-color:#E1E4F2 ;    
width: 210px;
min-height:229px;
text-align: left;
}

JavaScript

$(function(){
            
                //Select the channel to be removed
                var remove;
                // Remove Selected
                // Adding eventlisterner for click was removed
                
                $("#removeSelected").on('click', function(){
                    if(remove){
                    var r = confirm("Channel you selected will be removed");
                        if (r == true) {
                    $(".selected_channel").remove();
                        }
                    } else alert("You choose the channel to be removed\n\nPlease select one of the channels you've added");
                })    
            
            
            
            
            
            
            // No problem in the following code  
            
            // NOTE: see following code $("."+tiklanan).append("<aside id=\"aside\" rel=\"aside\">"+secilen+"</aside>");    
            
            /////////////////////////////////////////////////////////////////////////////////    
                //Eklenecek kanal seçme işlemi
                var secilen;
                $(".kanallar ul span").on('click', function(){
                    // secilen degeri aldık
                    secilen = $(this).text();
                    // tum secili alanların secimini kaldırdık
                    //$(".kanallar ul span").css("border","none");
                    //$(".kanallar ul span").removeAttr("style");
                    $(this).css("border","2px solid #eee");
                    $(".kanallar ul span").css("background-color","transparent");
                    $(".kanallar ul span").css("color","black");
                    // secili alanı border ile belirttik
                    //$(this).css("border","2px solid #eee");
                    $(this).css("color", "white");
                    $(this).css("background-color", "blue");
                });
            
                //Kanal ekleme & kontrolu
               ...