TDG TDG - 8 months ago 46
HTML Question

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

I want to add city name inside 'filter_selected_det' container.

Working: whatever

element clicked, it removes previous city name and replace with clicked city name.

Solution Needed:

Example. 'Perth' city name clicked.. it have to add to 'filter_selected_det'. Another city name 'Sydney' clicked, it have to add with existing 'Perth' like 'Perth, Sydney'. Like wise 'Perth, Sydney, Krabi, Melbourne'

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

please let me know comments.


<div class="filter_selected_det">

<div class="city_container">
<a href="#">Perth</a>
<a href="#">Sydney</a>
<a href="#">Krabi</a>
<a href="#">Melbourne</a>


$('.city_container a').on('click', function (e) {
var $selectCities = $(this).html();


you need to append new city, not replace all html:

$('.city_container a').on('click', function (e) {
    var newCity = $('<div/>').html($(this).html());

and you can add comma in css like:

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