title: How to Hide multiple dynamic Columns in JS
body: <p>Here I have set one button, which is toggle button. If I click that button Part of my fields should be hide. If I hit again, Hidden field should be show. This is my scenario.</p>
  
  <p>Here is my HTML Code:</p>
  
  <pre><code> &lt;!-- My toggle button code is here --&gt;
   &lt;td  align="center"&gt;
      &lt;input type="button" id="viewbutton"  style="width:80px;" class="button" onclick = "hide()" value="View More"/&gt; 
    &lt;/td&gt;
  
  &lt;!-- My headers of the table which are all hide while I hit the above button--&gt;
  &lt;tr&gt;
    &lt;th width='120' scope='col' id='remarks'&gt;&lt;div align="left"&gt;Remarks&lt;/div&gt;&lt;/th&gt;
    &lt;th width='66' scope='col' id='lan' &gt;&lt;div align="left"&gt;LAN Mac Address&lt;/div&gt;&lt;/th&gt;
    &lt;th width='70' scope='col' id='wifi' &gt;&lt;div align="left"&gt;Wifi Mac Address&lt;/div&gt;&lt;/th&gt;
    &lt;th width='65' scope='col' id='scrapped' &gt;&lt;div align="center"&gt;Scrapped date&lt;/div&gt;&lt;/th&gt;
  
  &lt;/tr&gt;
  &lt;?php  PopulateSystemAsset_byLocation($location_posted,$asset_type_posted,$employees_posted,"LIST") ?&gt; 
  </code></pre>
  
  <p>Dynamic Fields are:</p>
  
  <pre><code>function populateSystemAsset_byLocation($locations,$asset_types,$employees,$check)
   {
  
    while($fetchedquery = mysql_fetch_array($selectquery))
  
      //Retrieve all field from Database and assigned to variable (assume)
  
      echo "&lt;tr&gt;";
           echo "&lt;td align='left'&gt;$asset_type&lt;/td&gt;
           &lt;td align='left'&gt;$asset_description&lt;/td&gt;";
  
          echo "&lt;td align='left' id='remarks_Ans'&gt;$Remarks&lt;/td&gt;"; 
  
          if($LAN_addr == '' || $LAN_addr == 'NULL' ) 
          { 
              echo "&lt;td align='center' id='lan_Ans'&gt;&lt;/td&gt;";
          }
         else
         {
              echo "&lt;td align='center' id='lan_Ans'&gt;$LAN_addr&lt;/td&gt;";  //Formatted Date
         }
  
          if($Wifi_addr == '' || $Wifi_addr == 'NULL' ) 
          { 
              echo "&lt;td align='center' id='wifi_Ans'&gt;&lt;/td&gt;";
          }
         else
         {
              echo "&lt;td align='center' id='wifi_Ans'&gt;$Wifi_addr&lt;/td&gt;";  //Formatted Date
         }
  
  
         if($asset_scrapped_date == '' || $asset_scrapped_date == '0000-00-00') 
          { 
              echo "&lt;td align='center' id='scrapped_Ans'&gt;&lt;/td&gt;";
          }
         else
          {
              echo "&lt;td align='center' id='scrapped_Ans'&gt;$ScrappedDateFormatted&lt;/td&gt;";  //Formatted Date
          }
        echo "&lt;/tr&gt;";
  
   }//while
  }//function
  </code></pre>
  
  <p>My Javascript code :</p>
  
  <pre><code>   //Initially I Hide my fiels while page loads 
  
  &lt;script type="application/javascript"&gt;
    var flag = 0;
  
    function hide()
     {
      if(flag == 0)
      {
      document.getElementById("viewbutton").value = "View Less";
      document.getElementById("remarks").style.display = "table-cell";
      document.getElementById("lan").style.display = "table-cell";
      document.getElementById("wifi").style.display = "table-cell";
      document.getElementById("scrapped").style.display = "table-cell";
      document.getElementById("remarks_Ans").style.display = "table-cell";
      document.getElementById("lan_Ans").style.display = "table-cell";
      document.getElementById("wifi_Ans").style.display = "table-cell";
      document.getElementById("scrapped_Ans").style.display = "table-cell";
      flag = 1;
     }
     else
     {
      document.getElementById("viewbutton").value = "View More";
      document.getElementById("remarks").style.display = "none";
      document.getElementById("lan").style.display = "none";
      document.getElementById("wifi").style.display = "none";
      document.getElementById("scrapped").style.display = "none";
      document.getElementById("remarks_Ans").style.display = "none";
      document.getElementById("lan_Ans").style.display = "none";
      document.getElementById("wifi_Ans").style.display = "none";
      document.getElementById("scrapped_Ans").style.display = "none";
      flag = 0;
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>My Problem:
  But my problem is only hide headers and first row fields. Remaining rows does not hide. I don't know why second and future row's columns are not hide.  </p>
  
  <p>Please anyone help me to solve my problem.</p>