title: Drop-Down links are not showing In HTML table
body: <p>I Have an HTML table inside which  i am creating drop-down in one column which will have two links to go forward or to show something, i have successfully created the drop-down button but the drop-down links are not showing.</p>
  
  <p>please refer to the snippet</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var currentlyClickedCode = "";
   $(document).ready(function (){
     
      $dropdown = $("#contextMenu");
         $(".actionButton").click(function() {
           //move dropdown menu
           $(this).after($dropdown);
           //update links 
           $(this).dropdown();
  
           currentlyClickedCode = $(this).attr("data-place");
           console.log(currentlyClickedCode)
           
         });
    var tableData=[
                   {
                     "CATEGORY CODE": "C001",
                     "CATEGORY NAME": "Beverages",
                     "QUANTITY": "1.0000",
                     "AMOUNT": 18
                   },
                   {
                     "CATEGORY CODE": "C002",
                     "CATEGORY NAME": "Shakes",
                     "QUANTITY": "1.0000",
                     "AMOUNT": 80
                   },
                   {
                     "CATEGORY CODE": "C003",
                     "CATEGORY NAME": "Juices",
                     "QUANTITY": "1.0000",
                     "AMOUNT": 70
                   },
                   {
                     "CATEGORY CODE": "C004",
                     "CATEGORY NAME": "Soups",
                     "QUANTITY": "1.0000",
                     "AMOUNT": 55
                   },
                   {
                     "CATEGORY CODE": "C005",
                     "CATEGORY NAME": "Cookies",
                     "QUANTITY": "1.0000",
                     "AMOUNT": 46
                   },
                   {
                     "CATEGORY CODE": "C006",
                     "CATEGORY NAME": "Buns",
                     "QUANTITY": "1.0000",
                     "AMOUNT": 21
                   },
                   {
                     "CATEGORY CODE": "C007",
                     "CATEGORY NAME": "Breads",
                     "QUANTITY": "1.0000",
                     "AMOUNT": 40
                   },
                   {
                     "CATEGORY CODE": "C008",
                     "CATEGORY NAME": "Rusks",
                     "QUANTITY": "1.0000",
                     "AMOUNT": 52
                   },
                   {
                     "CATEGORY CODE": "C009",
                     "CATEGORY NAME": "Biscuits",
                     "QUANTITY": "1.0000",
                     "AMOUNT": 38
                   },
                   {
                     "CATEGORY CODE": "C010",
                     "CATEGORY NAME": "Puff",
                     "QUANTITY": "4.0000",
                     "AMOUNT": 132
                   },
                   {
                     "CATEGORY CODE": "C011",
                     "CATEGORY NAME": "Savouries",
                     "QUANTITY": "0.1000",
                     "AMOUNT": 29
                   },
                   {
                     "CATEGORY CODE": "C012",
                     "CATEGORY NAME": "Cake",
                     "QUANTITY": "1.0000",
                     "AMOUNT": 46
                   },
                   {
                     "CATEGORY CODE": "C014",
                     "CATEGORY NAME": "IceCream",
                     "QUANTITY": "1.0000",
                     "AMOUNT": 70
                   },
                   {
                     "CATEGORY CODE": "C019",
                     "CATEGORY NAME": "Curry",
                     "QUANTITY": "1.0000",
                     "AMOUNT": 180
                   },
                   {
                     "CATEGORY CODE": "C021",
                     "CATEGORY NAME": "Starter",
                     "QUANTITY": "1.0000",
                     "AMOUNT": 165
                   },
                   {
                     "CATEGORY CODE": "C022",
                     "CATEGORY NAME": "Roti",
                     "QUANTITY": "1.0000",
                     "AMOUNT": 60
                   },
                   {
                     "CATEGORY CODE": "C023",
                     "CATEGORY NAME": "Chawal",
                     "QUANTITY": "1.0000",
                     "AMOUNT": 185
                   },
                   {
                     "CATEGORY CODE": "C024",
                     "CATEGORY NAME": "Dessert",
                     "QUANTITY": "1.0000",
                     "AMOUNT": 66
                   },
                   {
                     "CATEGORY CODE": "C026",
                     "CATEGORY NAME": "Soup",
                     "QUANTITY": "1.0000",
                     "AMOUNT": 100
                   },
                   {
                     "CATEGORY CODE": "C027",
                     "CATEGORY NAME": "Salad",
                     "QUANTITY": "1.0000",
                     "AMOUNT": 50
                   },
                   {
                     "CATEGORY CODE": "C028",
                     "CATEGORY NAME": "Set Menu",
                     "QUANTITY": "3.0000",
                     "AMOUNT": 1290
                   },
                   {
                     "CATEGORY CODE": "C029",
                     "CATEGORY NAME": "Pastry",
                     "QUANTITY": "1.0000",
                     "AMOUNT": 80
                   },
                   {
                     "CATEGORY CODE": "C030",
                     "CATEGORY NAME": "Packed Meals",
                     "QUANTITY": "1.0000",
                     "AMOUNT": 25
                   },
                   {
                     "CATEGORY CODE": "C031",
                     "CATEGORY NAME": "Packaging",
                     "QUANTITY": "1.0000",
                     "AMOUNT": 5
                   },
                   {
                     "CATEGORY CODE": "C034",
                     "CATEGORY NAME": "Bhath",
                     "QUANTITY": "1.0000",
                     "AMOUNT": 68
                   },
                   {
                     "CATEGORY CODE": "C036",
                     "CATEGORY NAME": "Snacks",
                     "QUANTITY": "1.0000",
                     "AMOUNT": 10
                   },
                   {
                     "CATEGORY CODE": "C037",
                     "CATEGORY NAME": "Breakfast",
                     "QUANTITY": "5.0000",
                     "AMOUNT": 119
                   },
                   {
                     "CATEGORY CODE": "C038",
                     "CATEGORY NAME": "Evening Snacks",
                     "QUANTITY": "1.0000",
                     "AMOUNT": 70
                   },
                   {
                     "CATEGORY CODE": "C040",
                     "CATEGORY NAME": "Sandwich",
                     "QUANTITY": "1.0000",
                     "AMOUNT": 75
                   },
                   {
                     "CATEGORY CODE": "C042",
                     "CATEGORY NAME": "Burger",
                     "QUANTITY": "1.0000",
                     "AMOUNT": 75
                   },
                   {
                     "CATEGORY CODE": "C043",
                     "CATEGORY NAME": "Meals",
                     "QUANTITY": "1.0000",
                     "AMOUNT": 220
                   },
                   {
                     "CATEGORY CODE": "C044",
                     "CATEGORY NAME": "Curd",
                     "QUANTITY": "1.0000",
                     "AMOUNT": 12
                   },
                   {
                     "CATEGORY CODE": "C048",
                     "CATEGORY NAME": "Combo",
                     "QUANTITY": "2.0000",
                     "AMOUNT": 180
                   },
                   {
                     "CATEGORY CODE": "C051",
                     "CATEGORY NAME": "Silver Thali",
                     "QUANTITY": "1.0000",
                     "AMOUNT": 450
                   },
                   {
                     "CATEGORY CODE": "C052",
                     "CATEGORY NAME": "Sweets",
                     "QUANTITY": "1.0000",
                     "AMOUNT": 115
                   },
                   {
                     "CATEGORY CODE": "C054",
                     "CATEGORY NAME": "Instant Mixes",
                     "QUANTITY": "1.0000",
                     "AMOUNT": 66
                   },
                   {
                     "CATEGORY CODE": "C055",
                     "CATEGORY NAME": "RTE",
                     "QUANTITY": "1.0000",
                     "AMOUNT": 228
                   },
                   {
                     "CATEGORY CODE": "C057",
                     "CATEGORY NAME": "Spices",
                     "QUANTITY": "1.0000",
                     "AMOUNT": 40
                   },
                   {
                     "CATEGORY CODE": "C061",
                     "CATEGORY NAME": "Fast Food",
                     "QUANTITY": "1.0000",
                     "AMOUNT": 15
                   }
                 ]
        
      function addTable(tableData) {
         var col = Object.keys(tableData[0]); 
           
         var countNum = col.filter(i =&gt; !isNaN(i)).length;
         var num = col.splice(0, countNum); 
         col = col.concat(num); 
         
         var table = document.createElement("table");
  
         // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
  
         var tr = table.insertRow(-1); // TABLE ROW.
  
  
           for (var i = 0; i &lt; col.length; i++) {
             var th = document.createElement("th"); // TABLE HEADER.
             th.innerHTML = col[i];
                  
             tr.appendChild(th);
         }
  
         // ADD JSON DATA TO THE TABLE AS ROWS.
         for (var i = 0; i &lt; tableData.length; i++) {
  
             tr = table.insertRow(-1);
  
             for (var j = 0; j &lt; col.length; j++) {
                 var tabCell = tr.insertCell(-1);
                  var tabledata = tableData[i][col[j]];
           if(tabledata &amp;&amp; !isNaN(tabledata)){
             tabledata = parseInt(tabledata).toLocaleString('en-in')
           }
           if( tableData[i]['CATEGORY CODE'] === tableData[i][col[j]]){
               a = document.createElement("a");
               tabCell.classList.add("dropdown");
               a.classList.add("btn");
               a.classList.add("btn-default");
               a.classList.add("actionButton");
               /*  a.classList.add("text-center"); */
               /*  a.setAttribute("data-place", outlet);
               a.setAttribute("data-plac", element); */
               a.setAttribute("data-toggle", "dropdown");
               a.setAttribute("data-place", tableData[i]['CATEGORY CODE']); //this to print on console which drop-down button is clicked.
               a.innerHTML = tabledata;
               tabCell.appendChild(a);
           } else {
               span = document.createElement("span");
               span.innerHTML = tabledata;
               tabCell.appendChild(span)
           } 
  
              
           
           
           
           
           
           
           
   
                     if (j &gt; 1)
                      {
                    
                     tabCell.classList.add("text-right");
                      }
             }
         }
  
         // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
         var divContainer = document.getElementById("table1");
         divContainer.innerHTML = "";
         divContainer.appendChild(table);
         table.classList.add("table");
          table.classList.add("table-striped");
          table.classList.add("table-bordered");
   
         }
    addTable(tableData)
     
       });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
   &lt;link
        rel="stylesheet"
        type="text/css"
        href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"
      /&gt;
       &lt;script
        type="text/javascript"
        src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"
      &gt;&lt;/script&gt;
  &lt;div id="table1"&gt; 
  
  &lt;/div&gt;
     &lt;ul id="contextMenu" class="dropdown-menu" role="menu"&gt;
        &lt;li&gt;&lt;a href="test1.jsp" class="link1"&gt;BillSummary&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="test.jsp" class="link2"&gt;Item Summary&lt;/a&gt;&lt;/li&gt;
        
      &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>in my above snippet code is running successfully  and creating the dropdown button ,but not showing the links.</p>
  
  <p>What i am trying to achieve is</p>
  
  <ol>
  <li>To show the drop-down link when click on drop-down button.</li>
  <li>Print on console which drop-down button is clicked </li>
  </ol>
  
  <p>i am applying the right approach but don't know where it is going wrong.
  so please guide me,any kind of help or guidance will be helpful.</p>
  
  <p>my code is throwing error this <code>"TypeError: $(...).dropdown is not a function</code></p>
  
  <p><a href="https://jsbin.com/revujohogu/edit?html,js,console,output" rel="nofollow noreferrer">please check this link</a></p>