How to execute js code when clicking on a balloon in Yandex Maps API 2.1?

Question

JavaScript

Good afternoon. There is a Yandex map api 2.1 on the site. 1 Question: how was the js code executed when clicking on a certain balloon (i.e. there can be many of them)? 2 Question: how to change the balloon preset when clicking on a div (so that it changes visually)? Source:

ymaps.ready(init);
  function init() {
  	var myMap = new ymaps.Map('map', {
  		center: [55.755773, 37.617761],
  		zoom: 9
  	});

  	ymaps.option.presetStorage.add('my#icon', {
    iconLayout: 'default#image', //Свое изображение метки
    iconImageHref: 'img/location.svg', //URL файла с меткой
    iconImageSize: [22, 28], //Размер изображения
    iconImageOffset: [-11, -28] //Смещение ножки 
  });

  	ymaps.option.presetStorage.add('my#icon2', {
    iconLayout: 'default#image', //Свое изображение метки
    iconImageHref: 'img/location-active.svg', //URL файла с меткой
    iconImageSize: [22, 28], //Размер изображения
    iconImageOffset: [-11, -28] //Смещение ножки 
  });

  	var myPlacemark = new ymaps.Placemark([55.6, 37.7], {
  		balloonPanelMaxMapArea: 0,
  		balloonContentHeader: '<div class="online">Онлайн запись</div><div class="title">УЗ" Дорожная клиническая больница на станции Чита-2" ОАО "РЖД" стаци…</div><div class="place">Москва, Столярный переулок, дом 7, корпус 2</div><div class="line"><span class="ulica"><i class="orange"></i>Арбатская</span><span class="distance">0,3 км</span></div>',
  		balloonContentFooter: 'Пн. - Пт.: 9:00-21:00<br>Сб.: 10:00-18:00<br>Вс.: выходной',
  		preset: 'my#icon'            
  	}, {
  		preset: 'my#icon',

  	}); 

  	var myPlacemark1 = new ymaps.Placemark([55.7, 37.8], {
  		balloonPanelMaxMapArea: 0,
  		balloonContentHeader: '<div class="online">Онлайн запись</div><div class="title">УЗ" Дорожная клиническая больница на станции Чита-2" ОАО "РЖД" стаци…</div><div class="place">Москва, Столярный переулок, дом 7, корпус 2</div><div class="line"><span class="ulica"><i class="orange"></i>Арбатская</span><span class="distance">0,3 км</span></div>',
  		balloonContentFooter: 'Пн. - Пт.: 9:00-21:00<br>Сб.: 10:00-18:00<br>Вс.: выходной',
  		preset: 'my#icon'
  	}, {
  		preset: 'my#icon',

  	});

    // Создаем коллекцию, в которую будем добавлять метки
    clusterer = new ymaps.Clusterer({
      gridSize: 64,
      clusterDisableClickZoom: false,
      zoomMargin: [80,20,80,80],
      preset:'islands#orangeClusterIcons'
    });

    //Добавляем метки в коллекцию геообъектов.
    clusterer
    .add(myPlacemark)
    .add(myPlacemark1);

    // Добавляем коллекцию геообъектов на карту.
    myMap.geoObjects.add(clusterer);

    clusterer.events
    .add(['balloonopen', 'balloonclose'], function (e) {
    	var target = e.get('target');
    	if (target.geometry && typeof target.getGeoObjects) {
    		if(e.get('type') === 'balloonopen') {
    			target.options.set({
    				preset: 'my#icon2'
    			});       
    		} else {
    			target.options
    			.set('preset', target.properties.get('preset'));
    		}
    	}
    }); 
  }