javascript - Duplicate a chunk of HTML code with button press using jQuery -

i trying build website has multiple choice questions. want feature enables user add question button press. after pressing button editable mcq template should appear. have done coding question this

<div id="mcq">     <div id="question">         <p class="q1" data_opt="a"><b>q1.</b>what next number in series 1,2,3,...</p>     </div>      <div class="options">         <div id="optlist">             <p id="optid" class="opt ans" data-opt="a">4</p>             <p id="optid" class="opt" data-opt="b">5</p>             <p id="optid" class="opt" data-opt="c">6</p>             <p id="optid" class="opt" data-opt="d">7</p>         </div>     </div>      <div class="stats">         <ul class="stat_list">             <li><p class="btn">like</p></li>             <li><p class="like_counter">20</p></li>             <li><p class="done">check answer</p></li>         </ul>     </div>  </div> 

can tell me proper way duplicate code using jquery , edit text there after. reduces repeated coding. in advance!!

yes, should create fragment , inject this:

var options=""; var frag = ['<div id="optlist">'];     for(var i=0; i<answers.length; i++){           options+= '<p id=optid'+i+' class="opt" opt-data="'+anwsers[i].data+'">'+anwsers[i].answer+'</p>';     } frag.push(options); frag.push('</div>'); $(".options").append(frag.join(" ")); 

also, need make id's unique optid1, optid2, etc or use classes