jquery - Multiple Javascript function does not work at a time -

i have <ul> <li> lists. created code within <li> checkbox checked message box appear.

it works fine first not works second list.

the other issue on page of checkbox. message appear on checkbox that's checked.

snippet:

$(document).ready(function() {          var onee = $("#one, #two, #three, #four, #five, #six, #seven");      var 2 = $("#eight, #nine, #ten, #eleven, #twelve");          $(function() {          $(".chk-message16").hide();          onee.on('change', function() {              if ($('input[type=checkbox]:checked').length == 7) {                  $(".chk-message16").show();              } else {                  $(".chk-message16").hide();              }          });      });          $(function() {          $(".chk-message8").hide();          two.on('change', function() {              if ($('input[type=checkbox]:checked').length == 5) {                  $(".chk-message8").show();              } else {                  $(".chk-message8").hide();              }          });      });  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    <ul class="list-group">      <li class="list-group-item"><input type="checkbox" id="one"> one</li>      <li class="list-group-item"><input type="checkbox" id="two"> two</li>      <li class="list-group-item"><input type="checkbox" id="three"> three</li>      <li class="list-group-item"><input type="checkbox" id="four"> four</li>      <li class="list-group-item"><input type="checkbox" id="five"> five</li>      <li class="list-group-item"><input type="checkbox" id="six"> six</li>      <li class="list-group-item"><input type="checkbox" id="seven">seven</li>          <!-- if selected show message box-->      <div class="chk-message16">          <h1>message</h1>          <textarea></textarea>      </div>  </ul><br/><br/>    <ul class="list-group">      <li class="list-group-item"><input type="checkbox" id="eight">one</li>      <li class="list-group-item"><input type="checkbox" id="nine"> two</li>      <li class="list-group-item"><input type="checkbox" id="ten">three</li>      <li class="list-group-item"><input type="checkbox" id="eleven">four</li>      <li class="list-group-item"><input type="checkbox" id="twelve">five</li>          <!-- if selected show message box-->      <div class="chk-message8">          <h1>message</h1>          <textarea></textarea>      </div>  </ul>

i fixed code, adding unique class each list: see here

list-1 , list-2