title: jQuery add class to one element instead of all with same class
body: <p>I have multiple battery meters on a page that get their power bar width values dynamically and I'm trying to add a 'lowBatt' class with JS and jQuery to the existing 'bar' class when when the 'bar' class width is less than 2px and I have 2 issues:</p>
  
  <ol>
  <li><p>It is only checking the first 'bar' class element width. </p></li>
  <li><p>If the width of that first 'bar' class elements width is less than 2px it adds the 'lowBatt' class to all 'bar' class elements.</p></li>
  </ol>
  
  <p>What I need to happen is check all 'bar' class elements widths and any that are less than 2px width add the class 'lowBatt' to only those 'bar' class elements, leaving the other 'bar' class elements with greater than 2px widths alone.</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>$('.bar').each(function(i, obj){
    if ($('.bar').width() &lt; 2) {
        $(this).addClass('lowBatt')};
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.progress {
   height: 8px;
   width: 16px;
   background: #fff;
   border-radius: 0;
   border: 1px solid #fff;
   float: left;
   margin-bottom: 0;
  }
  .progress .bar {
    background-color: #000;
    background-image: none;
    background-repeat: repeat-x;
    box-shadow: none;
    box-sizing: border-box;
    color: #ffffff;
    float: left;
    font-size: 12px;
    height: 100%;
    text-align: center;
    text-shadow: none;
    transition: width 0.6s ease 0s;
  }
  .battTip {
   height: 6px;
    margin-top: 1px;
   margin-right: -3px;
    width: 2px;
   float: right;
   background: #fff;
   border: 1px solid #000;
   border-left: none;
  }
  .battIcnWrap {
   width: 18px;
   height: 10px;
   margin: 0 auto;
   float: left;
   border: 1px solid #000;
    margin-right: 10px;
  }
  
  .bar.lowBatt {
    background: #ff0000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="battIcnWrap"&gt;
    &lt;div class="progress"&gt;
      &lt;div class="bar" style="width: 1px;"&gt;&lt;/div&gt; 
    &lt;/div&gt;
    &lt;div class="battTip"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="battIcnWrap"&gt;
    &lt;div class="progress"&gt;
      &lt;div class="bar" style="width: 8px;"&gt;&lt;/div&gt; 
    &lt;/div&gt;
    &lt;div class="battTip"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="battIcnWrap"&gt;
    &lt;div class="progress"&gt;
      &lt;div class="bar" style="width: 1px;"&gt;&lt;/div&gt; 
    &lt;/div&gt;
    &lt;div class="battTip"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="battIcnWrap"&gt;
    &lt;div class="progress"&gt;
      &lt;div class="bar" style="width: 15px;"&gt;&lt;/div&gt; 
    &lt;/div&gt;
    &lt;div class="battTip"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks for any help.</p>