javascript - getting a html element in a empty div via Jquery or knockout js -

i have 3 buttons on click should add different container empty div outside

<button id="a" data-bind="clickme" value="1">a</button> <div id="empty1">  <button id="b" data-bind="clickme" value="2">b</button> <div id="empty2">   <button id="c" data-bind="clickme" value="3">c</button> <div id="empty3">   <!-- container below should replace empty div --> <div class="container" id="big_container" data-bind="visible : opencontainer"> <p> hello world !</p>  </div> 

all buttons can connected via 1 knockout js data bind click me , has value , id.

what lets button clicked, should display container on empty1 , if button 2 clicked should display big container on empty2. container hidden databind show when button clicked.

here knockout js function using

self.opencontainer = ko.observable(false); self.clickme= function(value){    if(value == 1){    // make observable visible container should display       self.opencontainer(true);    $("#empty1").load("big_container");    } } 

i trying jquery doesnt work, , tried knockout js component register not sure how works well.

you can jquery. please not here move container empty div, don't copy html content.

jquery(document).on('click','button[data-bind]',function(){    jquery('div#empty'+jquery(this).val()).html(jquery('div.container')) ;    jquery('div.container').show() ;  }) ;

div#empty1, div#empty2, div#empty3 {    border:1px solid red ;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <button id="a" data-bind="clickme" value="1">a</button>  <div id="empty1"> </div>  <button id="b" data-bind="clickme" value="2">b</button>  <div id="empty2"> </div>  <button id="c" data-bind="clickme" value="3">c</button>  <div id="empty3"> </div>    <!-- container below should replace empty div -->  <div class="container" id="big_container" style="display:none;">  <p> hello world !</p>   </div>