title: Count and add Dynamic ID and for values for form elements using javascript
body: <p>I am creating a list which has some form elements like html checkbox or radio-buttons. I want to give them dynamic <code>ID</code> and <code>for</code> values to its corresponding <code>LABEL</code> tag. All this but using JQuery/JavaScript.</p>
  
  <p>I am not that good in JavaScript</p>
  
  <p><a href="https://i.stack.imgur.com/4kevx.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4kevx.jpg" alt="dynamic ID and FOR values using Jquery/Javascript"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    function {
      var count = 0;
      var total = $('.product-menu li').length();
  
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.product-menu {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .product-menu li {
    display: list-item;
    line-height: 2;
  }
  .product-menu label {
    font-weight: normal;
    vertical-align: middle;
    padding-left: 10px;
    display: inline-block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;ul class="product-menu"&gt;
    &lt;li&gt;
      &lt;input type="checkbox" id="pm-1"&gt;
      &lt;label for="pm-1"&gt;New Arrivals&lt;/label&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;input type="checkbox" id="pm-2"&gt;
      &lt;label for="pm-2"&gt;Accessories&lt;/label&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;input type="checkbox" id="pm-3"&gt;
      &lt;label for="pm-3"&gt;Bags&lt;/label&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;input type="checkbox" id="pm-4"&gt;
      &lt;label for="pm-4"&gt;Jackets&lt;/label&gt;
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>