javascript - On Click.. Add Div text to another DIV with comma -

i want add city name inside filter_selected_det container.

working: whatever <a> element clicked, removes previous city name , replace clicked city name.

solution needed:

example. 'perth' city name clicked.. have add 'filter_selected_det'. city name 'sydney' clicked, have add existing 'perth' 'perth, sydney'. wise 'perth, sydney, krabi, melbourne'

if exceeds maximum 3 cities selected.. should not add.

please let me know comments.

html:

<div class="filter_selected_det">  </div> <div class="city_container">     <a href="#">perth</a>     <a href="#">sydney</a>     <a href="#">krabi</a>     <a href="#">melbourne</a> </div> 

js:

$('.city_container a').on('click', function (e) {     e.preventdefault();     $(this).addclass('selected');     var $selectcities = $(this).html();     $('.filter_selected_det').html($selectcities); }); 

you need append new city, not replace html:

$('.city_container a').on('click', function (e) {     e.preventdefault();     $(this).addclass('selected');     var newcity = $('<div/>').html($(this).html());     $('.filter_selected_det').append(newcity); }); 

and can add comma in css like:

.filter_selected_det > div { display: inline } .filter_selected_det > div:not(:first-child):before { content: ','; display: inline }