jquery - Load More Item js is not working -

jquery - Load More Item js is not working -

i want have list of product item in 1 div load after click on "load more". working without "use strict";. when utilize "use strict"; doesn't seem work. here's have: http://jsfiddle.net/mdmonir/ou4sjtan/

class="snippet-code-js lang-js prettyprint-override">$(document).ready(function () { size_li = $("#mylist li").size(); x=3; $('#mylist li:lt('+x+')').show(); $('#loadmore').click(function () { x= (x+5 <= size_li) ? x+5 : size_li; $('#mylist li:lt('+x+')').show(); }); $('#showless').click(function () { x=(x-5<0) ? 3 : x-5; $('#mylist li').not(':lt('+x+')').hide(); }); }); class="snippet-code-css lang-css prettyprint-override">#mylist li{ display:none; } #loadmore { color:green; cursor:pointer; } #loadmore:hover { color:black; } #showless { color:red; cursor:pointer; } #showless:hover { color:black; } class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="mylist"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> <li>six</li> <li>seven</li> <li>eight</li> <li>nine</li> <li>ten</li> <li>eleven</li> <li>twelve</li> <li>thirteen</li> <li>fourteen</li> <li>fifteen</li> </ul> <div id="loadmore">load more</div> <div id="showless">show less</div>

the problem lack of var before variable declarations. add together , should golden. in case "use strict" directive preventing unintentionally polluting global scope variables. result, need explicitly clear intended scope:

class="lang-js prettyprint-override">var size_li = $("#mylist li").size(); var x = 3;

upon adding var before each declaration, demo proceed work.

jquery