[makarow.dmitry]

Всем привет!
Не могу решить вопрос отображения элементов относительно друг друга.
Буду благодарен если подскажите.

1. Нужно чтобы при появлении одного элемента - все остальные скрывались. Делал так, но не выходит...

$(this).parents("#photo-block .brand-panel #hide").hide();

2. Перестала работать привязка элемента к другом, когда динамически генерирую контент. Нужно чтобы работало.
Статически работает вот так - http://teleport.ink/index_a.html

Вот функция.

function position()  {

                panel_info.position({
                    of: $(this),
                    my: "center center",
                    at: "center bottom+6",
                    collision: "flipfit",
                    within: image_mark
                });
}

Вот весь код JS

$(document).ready(function(){

	$(".mark-brand").click(function(){
            var panel_info = $(this).next('.brand-panel'); //Панель относящаяся к данной метке
            var switch_status = $(this).next('.brand-panel').attr("id"); //Берем значение переключателя
            var image_mark = $(this).siblings("#image");


            //Функция, которая приклеивает панель к метке.
            function position() {

                panel_info.position({
                    of: $(this),
                    my: "center center",
                    at: "center bottom+6",
                    collision: "flipfit",
                    within: image_mark
                });
            }

            //Взависимости от значения id либо скрываем, либо показываем панель
            if ( switch_status == "hide" ) {

                position();
                $(this).next('.brand-panel').attr("id","show");
                panel_info.show();
                $(this).parents("#photo-block .brand-panel #hide").hide(); //Здесь должны скрываться все панели с id hide 
                

            }
            else if ( switch_status == "show") 
            {
                panel_info.hide();
                $(this).next('.brand-panel').attr("id","hide");
            }



        });


});

А вот html

<div class="photo-block"> 



                            {% for tag in photo.get_tags %}

                            {% if tag.z_position == 1 %}                                             
                                <div class="mark-brand" style="top:{{ tag.y_position }}; left:{{ tag.x_position }};" id="{{ tag.id }}">
                                    <svg class="star-mark star-green-active" viewBox="0 0 105 105">
                                        <use xlink:href="#star-mark"></use>
                                    </svg>                          
                                </div>
                                <div class="brand-panel active" id="show">
                                    <a href="{{ tag.url }}">
                                        <p>{{ tag.brand_name }}</p>
                                        <div class="button-mark">
                                            <svg class="arrow-right-icon arrow-right-icon-green" viewBox="0 0 15.15 22">
                                            <use id="mark-close-use" xlink:href="#arrow-right-icon"></use>
                                            </svg>
                                        </div>
                                    </a>               
                                </div> 

                            {% else %}

                            <div class="mark-brand" style="top:{{ tag.y_position }}; left:{{ tag.x_position }};" id="{{ tag.id }}">
                                <svg class="star-mark" viewBox="0 0 105 105">
                                    <use xlink:href="#star-mark"></use>
                                </svg>                          
                            </div>
                            <div class="brand-panel position" id="hide">
                                <a href="{{ tag.url }}">
                                    <p>{{ tag.brand_name }}</p>
                                    <div class="button-mark">
                                        <svg class="arrow-right-icon arrow-right-icon-green" viewBox="0 0 15.15 22">
                                        <use id="mark-close-use" xlink:href="#arrow-right-icon"></use>
                                        </svg>
                                    </div>
                                </a>               
                            </div> 

                            {% endif %}
                                
                            {% endfor%}        
                        
                        <img src="/uploads/{{ photo.image }}" id="image"/>
                        <a href="/add/{{ item.id }}" class="button-add-edit" id="button-add-edit"></a> 
                           
                    </div>

Спасибо.