jquery - within a loop only one element is being appended to the div -

jquery - within a loop only one element is being appended to the div -

i new javascript , jquery , strugling satisfy screen requirements , please excuse if questions dumb

previusly working static code (taht text1 , text2 static)

so apending info way , working fine .

var text1 = "honey chocolate sauce 10 ml"; var text2 = "honey carmel 10 ml"; $('#topping_tsection_'+id_attr_val).append('<aside><h6 class="tdheading">'+name+ n+'</h6> \ <section class="secclass"> \ <a href="#">'+text1+'</a> \ </section> \ <section class="secclass"> \ <a href="#">'+text2+'</a> \ </section> \ </aside>');

all above working fine

but @ nowadays fetching text1 , text2 dynamically way

$(document).on("click", ".plus", function() { var str = ''; $("#topping_tsection_" + id_attr_val + " aside:first a").each(function() { var category = $(this).text(); str += '<aside><h6 class="tdheading">' + name + n + '</h6><section class="secclass"><a href="#">' + category + '</a></section>'$('#topping_tsection_' + id_attr_val).append(str); }); });

but see 1 text (honey chocolate sauce 10 ml)is beingness added div

this section response

<section id="topping_tsection_59"> <i id="topping-close"></i> <aside> <h6 class="tdheading">regular, 50 ml0</h6> <img src="images/arrow-topping.png"> <section class="secclass"><a href="#">honey chocolate sauce 10 ml</a></section> <section class="secclass"><a href="#">honey carmel 10 ml</a></section> </aside> <aside> <h6 class="tdheading">regular, 50 ml1</h6> <img src="images/arrow-topping.png"> <section class="secclass"><a href="#">honey chocolate sauce 10 ml</a></section> <section class="secclass"><a href="#">honey carmel 10 ml</a></section> </aside> </section>

could please allow me know .

i have working here: http://jsfiddle.net/z6et2/25/

i wasn't sure actual source looks had improvise little bit:

html:

<div id="jsfiddle"> <a href="#" class=".plus">[+]</a> <section id="topping_tsection_59"> <i id="topping-close"></i> <aside> <h6 class="tdheading">regular, 50 ml0</h6> <!-- <img src="images/arrow-topping.png" />--> <section class="secclass"><a href="#">honey chocolate sauce 10 ml</a> </section> <section class="secclass"><a href="#">honey carmel 10 ml</a> </section> </aside> <aside> <h6 class="tdheading">regular, 50 ml1</h6> <!-- <img src="images/arrow-topping.png" />--> <section class="secclass"><a href="#">honey chocolate sauce 10 ml</a> </section> <section class="secclass"><a href="#">honey carmel 10 ml</a> </section> </aside> </section> </div>

javascript:

jquery(document).ready(function () { console.log('document reqady'); $(document).on("click", "a", function () { // create work: console.log('click event'); id_attr_val = "59"; var n = 1; var str = ''; $("#topping_tsection_" + id_attr_val + " aside:first a").each(function () { n++; console.log(this); var category = $(this).text(); str += '<aside><h6 class="tdheading">' + name + n + '</h6><section class="secclass"><a href="#">' + category + '</a></section>'; $('#topping_tsection_' + id_attr_val).append(str); }); }); });

jquery