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_channel").click(function(){
 

    	remove = $(this).text();
        $(".remove_channel aside").css("background-color","transparent");
        $(".remove_channel aside").css("color","black");
        $(this).css("color", "white");
        $(this).css("background-color", "blue");
        $(this).addClass("selected_channel");
    });    
        
    
    // Remove Selected
    $("#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
    $('#qam_a, #qam_b, #qam_c, #qam_d').on('click',function(){
       var tiklanan =  $(this).attr('id');
       if(secilen){
           var yok = $(".kanalvarmi").html().indexOf(secilen)<0;
          ...