title: trying to insert the td values into progress bar using jquery or javascript
body: <p>I am trying to insert the value of classes pl1 and pl2 300 and -600 over green bar and red bar.
  Value has to be linked directly to td classes pl1 and pl2 using jquery / javascript
  by adding the codes to current jquery. Also html tags are restricted to be modified because it is just a part of long project and hence cannot be modified unless very important.</p>
  <pre><code>&lt;html&gt;
     &lt;head&gt;
        &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
        &lt;style&gt;
           .pct &gt; div &gt;.bar2 {
           margin-right: 2px;
           text-align: right;
           background: red;
           border: 1px;
           }
           .pct{
           width:auto;
           border: solid purple 1px;
           }
           table, td {
           border: solid black 1px;
           }
           .pl1,.pl2 {
           width: auto;
           display: none;
           }
        &lt;/style&gt;
     &lt;/head&gt;
     &lt;body&gt;
        &lt;table&gt;
           &lt;tr&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th class=&quot;kk&quot;&gt;OI%&lt;/th&gt;
           &lt;/tr&gt;
           &lt;tr&gt;
              &lt;td class=&quot;nm&quot;&gt;Nitin&lt;/td&gt;
              &lt;td class=&quot;pl1&quot;&gt;300&lt;/td&gt;
              &lt;td class=&quot;pct&quot;&gt;
                 &lt;div class=&quot;progressbar&quot;&gt;
                    &lt;div class=&quot;bar&quot;&gt;&lt;/div&gt;
                 &lt;/div&gt;
              &lt;/td&gt;
              &lt;td class=&quot;pl2&quot;&gt;-600&lt;/td&gt;
              &lt;td class=&quot;pct&quot;&gt;
                 &lt;div class=&quot;progressbar&quot;&gt;
                    &lt;div class=&quot;bar&quot;&gt;&lt;/div&gt;
                 &lt;/div&gt;
              &lt;/td&gt;
           &lt;/tr&gt;
        &lt;/table&gt;
        &lt;script&gt;
           $( function() {
                 let sal = $(&quot;.pl1 ,.pl2 &quot;);
                 
                 let progressbarSize = 100; //100%
                 
                 
                 $(&quot;.progressbar&quot;).css(&quot;width&quot;, &quot;auto&quot; + &quot;px&quot;)
                               
                 $(&quot;.bar&quot;).css({width : (&quot;auto&quot;) + &quot;px&quot;, height : &quot;20px&quot;, display : &quot;inline&quot;});
                 
                 $(&quot;.bar&quot;).css(&quot;float&quot;, &quot;left&quot; )
                
                 
                 
                       
                 $(sal).each(function(index, element){
                   let currentValue = parseInt($(element).text());
                   
                   //console.log(currentValue);
                   
                   if (currentValue &gt;= 0 &amp;&amp; currentValue &lt;= progressbarSize){
                    
           
                     //console.log(currentValue);
                     $(element).next().children().children(&quot;.bar&quot;).css(&quot;backgroundColor&quot;, &quot;#00ff00&quot;)
                     .css(&quot;width&quot;, (currentValue) + &quot;px&quot;)
                      
                     
           
                   }
                   else if (currentValue &gt;= 0 &amp;&amp; currentValue &gt;= progressbarSize){
           
                     //console.log(currentValue);
                     progressbarSize = currentValue;
                     
                     $(element).next().children().children(&quot;.bar&quot;).css(&quot;backgroundColor&quot;, &quot;#00ff00&quot;)
                     .css(&quot;width&quot;, (currentValue) + &quot;px&quot;)
                     
           
                   }
                   
                   else if(currentValue &gt;= (progressbarSize * -1) &amp;&amp; currentValue &lt; 0){
                   
            
                     //console.log(currentValue);
                     currentValue *= -1;
                     
                    
                     $(element).next().children().children(&quot;.bar&quot;).css(&quot;backgroundColor&quot;, &quot;red&quot;)
                     .css(&quot;width&quot;, (currentValue) + &quot;px&quot;)
                     
                     
                   }
                   
                   else if(currentValue &lt;= (progressbarSize * -1) &amp;&amp; currentValue &lt; 0){
                     
                     //console.log(currentValue);
                     
                     currentValue *= -1;
                     
                     $(element).next().children().children(&quot;.bar&quot;).css(&quot;backgroundColor&quot;, &quot;red&quot;)
                     .css(&quot;width&quot;, (currentValue) + &quot;px&quot;)
                     
                     
                   }
                   
                   else{
                     
                     $(element).next().children().children().hide(); //Hide the both, possitive and negative.
                     
                   }
                   
                 });
                 });
                
                 
        &lt;/script&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>