csv - Create a comma separated list of clicked elements with jquery -

i'm trying inject comma separated list dom user can copy , paste application. right i'm stuck on how handle first element not preceded comma.

right user clicks on element , jquery grabs id of element build list. user should able toggle selections on , off. need list generated in order user selects items.

html

comma separated list here: <span id="list"></span> <br /> <a id="1" class="clickme" href="#"><li>one</li></a> <a id="2" class="clickme" href="#"><li>two</li></a> <a id="3" class="clickme" href="#"><li>three</li></a> <a id="4" class="clickme" href="#"><li>four</li></a> <a id="5" class="clickme" href="#"><li>five</li></a> <a id="6" class="clickme" href="#"><li>six</li></a> 

css

.selected {     background-color: #99ccff;     } 

js - jquery loaded

$('.clickme').click(function (e) {         e.preventdefault();         var book_id = $(this).attr('id');          $(this).children('li').toggleclass("selected");         var list_container = $("#list");         if ($(this).children('li').is(".selected")) {             if (list_container.text().length > 0) {                 list_container.append("," + book_id);             } else {                 list_container.append(book_id);             }         } else {             list_container.text(list_container.text().replace("," + book_id, ""));                   } }); 

this works great build comma separated list , works great toggle off first value in list. problem first value inserted without preceding comma , replace function can't match it. if remove comma replace function i'm left bunch of unneeded commas. if match both run risk of matching part of id...ie replacing 3 in 13 when 3 toggled off.

i've tried ton of variations , can't find works.

my solution produced desired result use css inject commas , wrap injected ids span element.

css trick

#list span { display: inline; } #list span:after { content: ","; } #list span:last-child:after { content: ""; } 

worked great...except actual purpose of this. need users able copy , paste generated string. when use css produce content dom level clipboards in browsers don't see it. ie copied string see in browser, ff , safari both copied string without css appended commas.

fiddle here

it seems way on complicating problem. make array of selected book ids use .join(',') display them comma-separated list.

$('.clickme').click(function (e) {     e.preventdefault();     $(this).children('li').toggleclass("selected");      var list_container = $("#list");     var book_ids = $('.clickme:has(li.selected)').map(function(){         return this.id;     }).get();      list_container.text(book_ids.join(',')); }); 

demo: http://jsfiddle.net/ryu6m/2/

edit: want keep elements in order clicked. in case, need declare array outside click handler, either .push element onto or .splice out. it's easier work arrays, work strings.

var book_ids = []; $('.clickme').click(function (e) {     e.preventdefault();     $(this).children('li').toggleclass("selected");      var list_container = $("#list");      var index = $.inarray(this.id, book_ids);     if(index === -1){         // not in array, add         book_ids.push(this.id);     }     else{         // in array, remove         book_ids.splice(index, 1);     }      list_container.text(book_ids.join(',')); }); 

demo: http://jsfiddle.net/ryu6m/4/