Теги в связке Tickets+Tagger+Select2 с фронта

Доброго времени суток!
Для реализации тегов сайта использую связку Tickets+Tagger, а для стилизации тегов Select2.
Подключил к шаблону Select2. В настройках группы Tagger выбрано «Поле тегов» и возможность только выбирать из списка тегов
Для добавления с фронта, в чанк tpl.Tickets.form.create добавил:

<div class="form-group">
<label for="ticket-pagetitle">Событие</label>
<input type="hidden" name="tagger-1" id="input-event" value="">
<select id="select-event" multiple="multiple">		
	[[!TaggerGetTags? &groups=`1` &rowTpl=`tpl.Tag` &showUnused=`1` &sort=`{"id": "asc"}`]]
</select>

Чанк tpl.Tag:

<option value="[[+tag]]">[[+tag]]</option>

Select2 скрывает стандартный и выстраивает свой список. Все получается удобно и красиво для пользователя.
Вопрос? — как добавить выбранное значение (тег) пользователем в select2 в скрытый input

<input type="hidden" name="tagger-1" id="input-event" value="">

через ",": value=«Событие1, Событие2, Событие3». (на сколько понял Tagger именно через "," и понимает несколько тегов) и удалить значение (тег) из input при удалении тега пользователем.
Из документации Select2 использовать события:
select2:select — Срабатывает, когда выбран результат.
select2:unselect — Вызывается, когда выбор будет удален.
а также

$('select').on('select2:select', function (evt) {
  // Do something
});

чтобы input реагировал на событие (How can I attach listeners for these events?)
Поскольку не знаком с jquery сумел написать следующие:

$(function(){
$("#select-event").select2({
	placeholder: 'Выберите событие',
});
	
$('#select-event').on('select2:select', function (evt) {  
	$('#input-event').attr('value', this.value);
});
$('#select-event').on('select2:unselect', function (evt) {
	$('#input-event').removeAttr('value', this.value);
});		
});

Так добавляется только одно значение в input.
Заранее спасибо всем за помощь и советы.