Count and add Dynamic ID and for values for form elements using javascript

I am creating a list which has some form elements like html checkbox or radio-buttons. I want to give them dynamic ID and for values to its corresponding LABEL tag. All this but using JQuery/JavaScript.

I am not that good in JavaScript

$(document).ready(function() {
  function {
    var count = 0;
    var total = $('.product-menu li').length();

  }
});

.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="product-menu">
  <li>
    <input type="checkbox" id="pm-1">
    <label for="pm-1">New Arrivals</label>
  </li>
  <li>
    <input type="checkbox" id="pm-2">
    <label for="pm-2">Accessories</label>
  </li>
  <li>
    <input type="checkbox" id="pm-3">
    <label for="pm-3">Bags</label>
  </li>
  <li>
    <input type="checkbox" id="pm-4">
    <label for="pm-4">Jackets</label>
  </li>
</ul>

Count and add Dynamic ID and for values for form elements using javascript

3 Answers