JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<div class="follow_list keywords_list">
  <h4>Channels:</h4>
  <ul id="telegram_channels__list">
    <li>
      <a href="#" data-channel="76">ZZZ | Official Channel</a>
      <span class="remove_keyword delete_keyword" data-remove="76">
        <i class="fas fa-times-circle"></i>
      </span>
    </li>
    <li>
      <a href="#" data-channel="77">Shyft</a>
      <span class="remove_keyword delete_keyword" data-remove="77">
        <i class="fas fa-times-circle"></i>
      </span>
    </li>
    <li>
      <a href="#" data-channel="78">Dona | Official Channel</a>
      <span class="remove_keyword delete_keyword" data-remove="78">
        <i class="fas fa-times-circle"></i>
      </span>
    </li>
    <li>
      <a href="#" data-channel="79">Starter</a>
      <span class="remove_keyword delete_keyword" data-remove="79">
        <i class="fas fa-times-circle"></i>
      </span>
    </li>
    <li>
      <a href="#" data-channel="80">Factory</a>
      <span class="remove_keyword delete_keyword" data-remove="80">
        <i class="fas fa-times-circle"></i>
      </span>
    </li>
    <li>
      <a href="#" data-channel="81">Network</a>
      <span class="remove_keyword delete_keyword" data-remove="81">
        <i class="fas fa-times-circle"></i>
      </span>
    </li>
    <li>
      <a href="#" data-channel="82">Fiba (Official)</a>
      <span class="remove_keyword delete_keyword" data-remove="82">
        <i class="fas fa-times-circle"></i>
      </span>
    </li>
    <li>
      <a href="#" data-channel="83">WE Official (English Group)</a>
      <span class="remove_keyword delete_keyword" data-remove="83">
        <i class="fas fa-times-circle"></i>
      </span>
    </li>
    <li>
      <a href="#" data-channel="84">List Official</a>
      <span class="remove_keyword delete_keyword" data-remove="84">
        <i class="fas fa-times-circle"></i>
      </span>
    </li>
  </ul>
</div>

CSS

.follow_list {
  position: absolute;
  display: block;
  width: 400px;
  /* border: 1px solid green; */
}
.fa-times-circle {
  position: absolute;
  display: inline;
  right: 10px;
  width: 12px;
  height: 12px;
  border: 1px solid red;
}

JavaScript

let order = $('ul#telegram_channels__list');

order.on('click', 'li >', function () {
  console.log($(this).data());
  return false;
});