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(){
    
                //Eklenecek kanal seçme işlemi
                var remove;
                var secilen;
                var atanan;
                $(".kanallar ul span").on('click', function(){
                    // secilen degeri aldık
                    secilen = $(this).text();
                    atanan = $(this);
                    $(".kanallar ul span").css("color", "");
                    $(".kanallar ul span").css("background-color","");                    
                    $(this).css("color", "white");
                    $(this).css("background-color", "blue");
                });
            
                //QAM paketine Kanal ekleme, ekleneni kontrol etme ve QAM paketinde seçim yapma
                $('#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;
                       if(yok) {
                           // Seçilen kanalı QAM paketine ekleme
                           var eleaside = $("<aside>"+secilen+"</aside>");
                           eleaside.click(function(){            
                               remove = $(this).text();
                               $(".kanaliKaldir aside").removeAttr("style");
                               $("aside").removeAttr("class");
                               $(this).css("color", "white");
                               $(this).css("background-color", "blue");
                               $(this).addClass("secilenKanal");
                           });
                           // Seçilen kanalı QAM paketine ekleme
                           $("."+tiklanan).append(eleaside);
                           secilen = null;
                           $(atanan).css("border","2px solid #eee");
                       } else alert("Bu kanalı zaten eklediniz.");
                   } else alert("Önce bir kanal...