title: Add a div class css to a javascript function automatically
body: <p>I have hardcoded two values which display a green icon on the one which has online status and red icon on the one which is offline. Now i want it to automatically add the green icon in the table when my function is called.</p>
  
  <pre><code>&lt;div class="col-md-8"&gt;
            &lt;table class="table table-bordered table striped " id="thinker_table" &gt;
            &lt;thead class="thead-dark"&gt;
                &lt;tr&gt;
                  &lt;th&gt;Thinker Name&lt;/th&gt;
                  &lt;th&gt;MAC Address&lt;/th&gt;
                  &lt;th&gt;Status&lt;/th&gt;
                  &lt;th&gt;Indicator&lt;/th&gt;
                  &lt;th&gt;Show Routines&lt;/th&gt;
                  &lt;th&gt;Show Devices&lt;/th&gt;
                  &lt;/thead&gt;
  
  
                &lt;/tr&gt;
                  &lt;td&gt;IPLConference Room&lt;/td&gt;
                  &lt;td&gt;XXXXXXXXXXXXX&lt;/td&gt;
                  &lt;td &gt;Online&lt;/td&gt;
                  &lt;td&gt;
                  &lt;div class="led-green"&gt;&lt;/div&gt;
                  &lt;td&gt; &lt;input type="button"  value="Click Here" onclick="window.open('RoutineDetails.php','popUpWindow','height=500,width=700,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');"&gt;&lt;/td&gt;             
                  &lt;td&gt; &lt;input type="button" value="Click Here" onclick="window.open('DeviceDetails.php','popUpWindow','height=500,width=800,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');"&gt;&lt;/td&gt;   
                  &lt;tr&gt;
                  &lt;td&gt;Host_34F60E &lt;/td&gt;
                  &lt;td&gt;XXXXXXXXXX&lt;/td&gt;
                  &lt;td &gt;Offline&lt;/td&gt;
                  &lt;td&gt;
                  &lt;div class="led-red"&gt;&lt;/div&gt;
  
                  &lt;/td&gt;
  
                  &lt;tfoot &gt;
                &lt;tr&gt;
                  &lt;th&gt;Thinker Name&lt;/th&gt;
                  &lt;th&gt;MAC Address&lt;/th&gt;
                  &lt;th&gt;Status&lt;/th&gt;
                  &lt;/tfoot &gt;
            &lt;/table&gt;
          &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my javascript below im displaying the result in a table. the table should display a green icon where the status = 1. As my condition is if status = 1 hence i should get green icon on all the table row.</p>
  
  <p></p>
  
  <pre><code>$(document).ready(function(){
    $.getJSON("test.json", function(data){
       var thinker_data = '';
       $.each(data.data, function(key, value){
        if(value.status == "1")
        {
          thinker_data += '&lt;tr&gt;';
          thinker_data += '&lt;td&gt;'+value.name+'&lt;/td&gt;';
          thinker_data += '&lt;td&gt;'+value.mac+'&lt;/td&gt;';
          thinker_data += '&lt;td&gt;'+value.status+ '&lt;/td&gt;';
          thinker_data += '&lt;/tr&gt;';   
        }
  
       });
       $('#thinker_table').append(thinker_data);
  
      }); 
    });
  
    &lt;/script&gt;
  </code></pre>
  
  <p>The answer was helpful but now now i am getting the icon like this
  <a href="https://i.stack.imgur.com/XFne1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XFne1.png" alt="Icons are not centered"></a></p>
  
  <p>also how do I add the two buttons as well in the table?</p>