How to display the contents of the balloon (Yandex.maps api) in a separate div?

Question

API

I'm making a map through the Yandex.maps api, how can the contents of the balloon (balloonContent) be displayed in a given div on the page?
UPD . It turned out to be done, but if there are several labels, then when switching from label to label, the content does not change, it is necessary to close the balloon. How to fix it?

ymaps.ready(function () {
      var myMap = new ymaps.Map('mapYa', {
              center: [55.727072007822755,37.663291730468764],
              zoom: 12
          }, {
              searchControlProvider: 'yandex#search'
          }),
          myPlacemark = new ymaps.Placemark([55.727072007822755,37.663291730468764], {
              hintContent: 'Балун 1',
              balloonContent: '<div class="balloon" ><b>Оперный театр</b><br/>ул. Белинского, 108</div>'
          }, {
              iconLayout: 'default#image',
              iconImageHref: 'theater.png',
              iconImageSize: [100, 100],
              iconImageOffset: [-50, -100]
          });

          myPlacemark2 = new ymaps.Placemark([55.746054920068914,37.67359141308594], {
              hintContent: 'Балун 2',
              balloonContent: '<div class="balloon"><b>33333Оперный театр</b><br/>ул. Белинского, 59</div>'
          }, {
              iconLayout: 'default#image',
              iconImageHref: 'theater.png',
              iconImageSize: [100, 100],
              iconImageOffset: [-50, -100]
          });

          myMap.events.add(['balloonopen', 'balloonclose'], function (e) {
            var cont = $(".balloon").html();
            $("#test").html(cont);
            myMap.events.add('click', function () {
                myMap.balloon.close();
            });
          });
          
      myMap.geoObjects.add(myPlacemark);
      myMap.geoObjects.add(myPlacemark2);
      myMap.behaviors.disable('scrollZoom');
  });