JSFiddle - React, Tailwind, and code Playground

by Ashok Gupta

HTML

<script src="https://www.visitrentals.com/new_system/js/jquery-2.1.4.min.js"></script>
<script src="https://www.visitrentals.com/new_system/js/jplist.core.min.js"></script>
<script src="https://www.visitrentals.com/new_system/js/jplist.pagination-bundle.min.js"></script>
<!-- demo -->
<div id="demo">

  <!-- panel -->
  <div class="jplist-panel">

    <!-- pagination control -->
    <div class="jplist-pagination" data-control-type="pagination" data-control-name="paging" data-control-action="paging" data-items-per-page="2">
    </div>

  </div>

  <!-- HTML data -->
  <div class="list">

    <!-- item 1 -->
    <div class="list-item">
      <p>
        first result
      </p>
      <p class="hitme">
        click me
      </p>
      <hr>
    </div>

    <!-- item 2 -->
    <div class="list-item">
      <p>
        second result
      </p>
      <hr>
    </div>

    <!-- item 3 -->
    <div class="list-item">
      <p>
        thrid result
      </p>
      <button class="hitme">
        click me
      </button>
      <hr>
    </div>

    <!-- item 4 -->
    <div class="list-item">
      <p>
        fourth result
      </p>
      <hr>
    </div>
    <hr>
    <!-- item 5 -->
    <div class="list-item">
      <p>
        fifth result
      </p>
      <button class="hitme">
        click me
      </button>
      <hr>

    </div>

    <!-- item 6 -->
    <div class="list-item">
      <p>
        sixth result
      </p>
    </div>


  </div>



</div>

JavaScript

$('document').ready(function() {

  $('#demo').jplist({
    itemsBox: '.list',
    itemPath: '.list-item',
    panelPath: '.jplist-panel'
  });

  $(document).on('click', '.hitme' , function() {
    alert('clicked');
  })

});