JSFiddle - React, Tailwind, and code Playground

by draj8126

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>JS Bin</title>
    <script
      type="text/javascript"
      src="http://code.jquery.com/jquery-2.0.2.js"
    ></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"
    />
    <script
      type="text/javascript"
      src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"
    ></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css"
    />
  </head>
  <body>
    <div id="tbl"></div>

    <ul id="contextMenu" class="dropdown-menu" role="menu">
      <li><a href="#" class="link1">Report1</a></li>
      <li><a href="#" class="Link2">Report2</a></li>
    </ul>
  </body>
</html>

JavaScript

$(window).load(function() {
        $dropdown = $("#contextMenu");
        $(".actionButton").click(function() {
          //get row ID
         
          //move dropdown menu
          $(this).after($dropdown);
          //update links
          
          $(this).dropdown();
        });
      });

    data= [
           {
             "amount": 291589,
             "billdate": "2018-08-01",
             "outlet": "JAYANAGAR"
           },
           {
             "amount": 58337,
             "billdate": "2018-08-01",
             "outlet": "MALLESHWARAM"
           },
           {
             "amount": 65970,
             "billdate": "2018-08-01",
             "outlet": "KOLAR"
           },
           {
             "amount": 296125,
             "billdate": "2018-08-02",
             "outlet": "JAYANAGAR"
           },
           {
             "amount": 56545,
             "billdate": "2018-08-02",
             "outlet": "MALLESHWARAM"
           },
           {
             "amount": 72213,
             "billdate": "2018-08-02",
             "outlet": "KOLAR"
           },
           {
             "amount": 346605,
             "billdate": "2018-08-03",
             "outlet": "JAYANAGAR"
           },
           {
             "amount": 62459,
             "billdate": "2018-08-03",
             "outlet": "MALLESHWARAM"
           },
           {
             "amount": 65248,
             "billdate": "2018-08-03",
             "outlet": "KOLAR"
           },
           {
             "amount": 518212,
             "billdate": "2018-08-04",
             "outlet": "JAYANAGAR"
           },
           {
             "amount": 104801,
             "billdate": "2018-08-04",
             "outlet": "MALLESHWARAM"
           },
           {
             "amount": 138151,
             "billdate": "2018-08-04",
             "outlet": "KOLAR"
           },
           {
             "amount": 628358,
             "billdate": "2018-08-05",
             "outlet":...