title: jQuery collision - if any of Labels are overlapped
body: <p>I have created labels for each block which it should show top left of the block. If labels are overlapped with another, I have to move the overlapped label to up by 34px. </p>
  
  <p><strong>This has to happen only if Labels are overlapped</strong></p>
  
  <p><strong>PS</strong> content is coming dynamically, hence I do not have access to add any classes or ids to achieve through CSS :(</p>
  
  <blockquote>
    <p>HTML:</p>
  </blockquote>
  
  <pre><code>&lt;div class="main-div"&gt;
  
    &lt;div class="hrefOverlay"&gt;
      &lt;img src="http://via.placeholder.com/400x150"&gt;
      &lt;div class="resTotalClicksDiv"&gt;label&lt;/div&gt;
    &lt;/div&gt;
    &lt;br&gt;&lt;br&gt;&lt;br&gt;
      &lt;div class="hrefOverlay"&gt;
      &lt;img src="http://via.placeholder.com/400x50"&gt;
      &lt;div class="resTotalClicksDiv"&gt;label&lt;/div&gt;
    &lt;/div&gt;
  
  &lt;br&gt;&lt;br&gt;&lt;br&gt;
  
    &lt;div class="hrefOverlay"&gt;
      &lt;img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_color-20.png"&gt;
      &lt;div class="resTotalClicksDiv"&gt;Facebook&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="hrefOverlay"&gt;
      &lt;img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_color-20.png"&gt;
      &lt;div class="resTotalClicksDiv"&gt;Twitter&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="hrefOverlay"&gt;
      &lt;img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-20.png"&gt;
      &lt;div class="resTotalClicksDiv"&gt;Linkedin&lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p>CSS:</p>
  </blockquote>
  
  <pre><code>body{margin:50px auto;}
  .main-div{width:400px;margin:auto;border:1px solid #ccc;font-family:verdana;font-size:13px;padding:30px 20px 10px 20px;background:#f5f5f5;}
  .hrefOverlay{position:relative;display:inline-block;}
  .resTotalClicksDiv{position:absolute;top: -25px;left:0;background-color: #eac0c0;padding: 5px;font-size: 12px;border:1px solid red;}
  .resTotalClicksDiv:before {content: "";display: block;background: red;width: 1px;height: 20px;float: left;margin: 0;position: absolute;left: -1px;top: 0px;height: 34px;}
  </code></pre>
  
  <blockquote>
    <p>jQuery</p>
  </blockquote>
  
  <pre><code>var newStyle = document.createElement('style');             
  
  $('.hrefOverlay').find('.resTotalClicksDiv').each(function(i) {
    $(this).addClass('resTotalClicksDiv-'+i);
    $(this).css('top', -(i+1)*22 + 'px')
    newStyle.appendChild(document.createTextNode(".resTotalClicksDiv-"+i+":before{height:"+(34+(i)*22)+"px;}"));
      document.head.appendChild(newStyle);
  
  });
  </code></pre>
  
  <p>Thanks for the @Haresh Vidja, for jQuery solution</p>
  
  <p><strong>What I am getting: <a href="http://jsfiddle.net/nemukpx0/" rel="nofollow noreferrer"><code>Fiddle</code></a></strong></p>
  
  <blockquote>
    <p>From</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/2zWLG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2zWLG.png" alt="enter image description here"></a></p>
  
  <blockquote>
    <p>To</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/oFEOb.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oFEOb.jpg" alt="enter image description here"></a></p>
  
  <p><strong>Desired result:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/y9AMf.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y9AMf.jpg" alt="enter image description here"></a></p>