JSFiddle - React, Tailwind, and code Playground

by jairajdesai

HTML

<ul class="sidebar list-reset favor_document collapse in SaveDocDelete" id="savedocumentroot-collapse">
  <li class="">
    <a href=''>doc1 </a>
    <span class="trashcan">t1</span>
  </li>
  <li>
    <a href="">doc2 </a>
    <span class="trashcan">t2</span>
  </li>
  <li>
    <a href="#parentLevel1" data-toggle="collapse">
      <span class="caret-right"></span>
      </a><span class="folder">fold2</span><span class="trashcan">t3</span>
    <ul class="collapse" id="parentLevel1">

      <li class=""><a href="">doc4</a><span class="trashcan">t4</span></li>
      <!-- ROOT DOCS -->
      <li>
        <a href="#1childlevel1" data-toggle="collapse">
          <span class="caret-right"></span></a><span class="folder">
          fold2.1</span><span class="trashcan">t5</span>

        <ul id="1childlevel1" class="collapse in">

          <li class="">
            <a href="">doc6</a><span class="trashcan">t6</span></li>

        </ul>


      </li>
      <li>
        <a href="#1childlevel2" data-toggle="collapse">
          <span class="caret-right"></span></a><span class="folder">
																	</span>fold2.2<span class="trashcan">t7</span>

        <ul id="1childlevel2" class="collapse in">

          <li class="">
            <a href="">doc7</a><span class="trashcan">t8</span></li>

        </ul>

      </li>
    </ul>
  </li>

  <li>
    <a href="#parentLevel2" data-toggle="collapse">
      <span class="caret-right"></span>
    </a><span class="folder"></span>fold1<span class="trashcan">t9</span>
    <ul class="collapse" id="parentLevel2">

      <li class=""><a href="">doc3</a><span class="trashcan">t10</span></li>
      <!-- ROOT DOCS -->

      <li class=""><a href="">doc10</a><span class="trashcan">t11</span></li>
      <!-- ROOT DOCS -->

      <li>
        <a href="#2childlevel1" data-toggle="collapse">
          <span class="caret-right"></span></a><span class="folder">
																	</span>fold1.1<span class="trashcan">t12</span>

        <ul...

CSS

li {
  line-height: 26px;
}

ul ul {
  padding-left: 20px;
}

ul li span {
  padding-left: 10px;
  border: 1px solid red;
}

JavaScript

$(function() {

  $(".sidebar li a span").click(function() {

    var clickedValue = $.trim($(this).parent().find().text());

    alert(clickedValue);

  });

});