title: Need to check class exist in multiple div using javascript
body: <p>There are multiple divs of step_input as class and inside those divs may or may not consists spans with same class. I need to check whether a particular span exist in any of the div with class as step_input. Then change the color of spans with same class which exists in selectable-tags class.I had to use javascript only</p>
  
  <p>Here in the fiddle span1 exists in the step_input class. So its color in selectable-tags needs to be changed.<br>
  Here's a fiddle <a href="https://jsfiddle.net/akhilsahu/qutx98qo/" rel="nofollow noreferrer">Link </a></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 parentz = document.querySelectorAll('step_input');
  
    for(i=0;i&lt;document.querySelectorAll('.selectable-tags &gt; span').length;i++)
     {
        tagclassName='ing-tag_'+i; 
         for(k=0;k&lt;parentz.length;k++)
         if ( parentz[k].querySelector("."+tagclassName) !== null) {
         document.querySelector('.selectable-tags &gt; tagclassName').style.backgroundColor="#fafafa";
      }  
     
     }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div  class="selectable-tags"  &gt;
     &lt;span  data-class="label" style="background-color: red;" class="ing-tag_0"&gt; Span1 &lt;/span&gt; &amp;nbsp;
     &lt;span style="background-color: red;"  data-class="label" class="ing-tag_1"&gt; wqq &lt;/span&gt; &amp;nbsp;
  &lt;/div&gt;
  &lt;div  class="selectable-tags"  &gt;
     &lt;span style="background-color: red" data-class="label" class="ing-tag_0"&gt; Span1 &lt;/span&gt; &amp;nbsp;
     &lt;span style="background-color: red;"  data-class="label" class="ing-tag_1"&gt; wqq &lt;/span&gt; &amp;nbsp;
  &lt;/div&gt;
  &lt;div   id="step_input_0" name="step"   class="recipe-create-text_box_rectangle stepbox step_input" contenteditable="true"&gt; This does not contains anything 
  &lt;/div&gt;
  &lt;div value="" id="step_input_1" name="step" placeholder="Tell us about step 2" class="recipe-create-text_box_rectangle stepbox step_input" contenteditable="true"&gt; &lt;span  style="background-color: red;" data-class="label" class="ing-tag_0" contenteditable="false"&gt; Span1 &lt;/span&gt;Thw color of span 1 in selectable tags needs to change&amp;nbsp;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Edit: When a span with is detected in the step_input. Its corresponding one in .selectable_tags class 's color changes. Like here Span1 with class 'ing-tag_1' is in step_input class. Now the color of Span1 in the div with class selectable_tags 's color needs to be change. Please suggest a better way to do this if there's one.</p>