显示和隐藏内容使用Jquery

Question

假设我有一个像这样的HTML代码。

<div class="question">
    <div class="individual_question">1</div>
    <div class="individual_question">2</div>
    <div class="individual_question">3</div>
    <div class="individual_question">4</div>
    <div class="individual_question">5</div>
    <div class="individual_question">6</div>
    <div class="individual_question">7</div>
    <div class="individual_question">8</div>
    <div class="individual_question">9</div>
    <div class="individual_question">20</div>
    <div class="individual_question">11</div>
    <div class="individual_question">12</div>
    <div class="individual_question">13</div>
    <div class="individual_question">14</div>
    <div class="individual_question">15</div>
    <div class="individual_question">16</div>
    <div class="individual_question">17</div>
    <div class="individual_question">18</div>
    <div class="individual_question">19</div>
    <div class="individual_question">20</div>
    <div class="individual_question">21</div>
.......................up to 100
</div>
<button class="next">Next</button>

我想做什么？ 当有人点击下一个按钮时，我想先添加新按钮，隐藏1,2,3,4,5显示6,7,8,9,10。如果有人点击按钮，则隐藏6,7,8,9,10并显示11,12,13,14,15，我想要显示95,96,97,98,99,100时隐藏下一个按钮。

我可以做到这里

<script>
$(function(){
var question=$(".question div");

question.addClass('hide');  

$(".next").on("click",function{
$("<button></button>",{class="previous",text="previous"}).insertBefore('.next');
$("question div:lt(11)").show();
$("question div:lt(6)").hide();
return false;
});

});
</script>

是否可以使用jquery？谢谢:)）