Count and add Dynamic ID and for values for form elements using javascript
<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>