title: How to target clicked element to a specific element to show its description
body: <p>We have blocks with buttons. Each button targets its <code>[data-description]</code> to a specific block, which shows the <code>[data-description]</code> to its targeted <code>content-block</code>. Now I manualy set <code>if</code> function, like: </p>
  
  <pre><code>if (targetElement == 'text-pack-1')
  if (targetElement == 'text-pack-2')
  </code></pre>
  
  <p>And the question is how NOT manualy write if condition, so the each button block knows where its targeted?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function modalBox() {
    $('.list-labels').each(function(i) {
      i++;
      $(this).addClass('pack-' + i);       
    });
    $('.content-block').each(function(i) {
      i++;
      $(this).addClass('text-pack-' + i);       
    });
    
    $('.pack').on('click', function() {
      var targetElement = $(this).data('target')
      
      if (targetElement == 'text-pack-1') {
        var descrip = $(this).data('description')
        $('.text-pack-1').text(descrip)
      }
      if (targetElement == 'text-pack-2') {
        var descrip = $(this).data('description')
        $('.text-pack-2').text(descrip)
      }
      
    })
  }
  
  modalBox()</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box
  }
  body {
    margin: 100px;
    background: #39A2AE;
    font-family: 'PT Sans', sans-serif;
  }
  ul {
    margin-bottom: 20px;
  }
  .pack {
    color: #fff;
    cursor: pointer;
   }
  
  li {
    margin-bottom: 5px;
  }
  .content-block {
    padding: 20px;
    border: 2px solid #fff;
    margin: 30px 0;
    color: #fff;
  }</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;ul class="list-labels"&gt; 
    &lt;li&gt;&lt;div class="pack" data-target="text-pack-1" data-description="Button-1"&gt;Button-1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;div class="pack" data-target="text-pack-1" data-description="Button-2"&gt;Button-2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;div class="pack" data-target="text-pack-1" data-description="Button-3"&gt;Button-3&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;div class="pack" data-target="text-pack-1" data-description="Button-4"&gt;Button-4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul class="list-labels"&gt;
    &lt;li&gt;&lt;div class="pack" data-target="text-pack-2" data-description="Button-5"&gt;Button-5&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;div class="pack" data-target="text-pack-2" data-description="Button-6"&gt;Button-6&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;div class="pack" data-target="text-pack-2" data-description="Button-7"&gt;Button-7&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;div class="pack" data-target="text-pack-2" data-description="Button-8"&gt;Button-8&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div class="content-block"&gt;
    
  &lt;/div&gt;
  &lt;div class="content-block"&gt;
    
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>