javascript - jQuery One() not working correctly and still allowing replication -

i'm trying have button appear on separate button click. there 2 buttons "traditional" , "simple" , both of them trigger panel expand. when panel expands want add third button allows user scroll next section of page. i'm placing button in div called box. however, one() function doesn't work, , more buttons continue pile on top of each other. i'm using other methods, one() function seemed simplest.

here's jquery code:

<script type="text/javascript"> 

$(document).ready(function() {      $('.buttons').click(function() {      $('#one .container').animate({          height: "800px"        },        300);        $('html, body').animate({        scrolltop: $("#one").offset().top      }, 1000);        //this part isn't working correctly      $(".buttons").one("click", function() {        $("#box").append('<a href="#two" class="goto-next scrolly">next</a>');      });    });    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div id="div1">    <ul class="actions buttons">      <li>        <input id="b1" type="button" onclick="loadxmldoctraditional()" value="traditional" class="special" />      </li>    </ul>  </div>    <div id="div2">    <ul class="actions buttons">      <li>        <input id="b2" type="button" onclick="loadxmldocsimple()" value="simple" class="special" />      </li>    </ul>  </div>