Здравствуйте уважаемы разработчики!
У меня ситуация следующая. В каталоге есть фильтр tagmanager2 на ajax

У меня идут два блока с фильтрами. Один фильтр сверстан для широких мониторов а другой для мобильной версии

Сам код собственно

<noindex>
      <div id="filters" class="container visible-lg">
        [[!tmFilters?
        &filterOuterTpl=`tm2_filterOuterTpl_select`
        &filterTpl=`tm2_filterTpl_select`
        &filterNumericOuterTpl=`tm2_filterOuterTpl`
        &filterNumericTpl=`tm2_filterNumericTpl`
        &jsMap=`1`
        &toPlaceholder=`filters`
        ]]
        
		<form action="[[~[[*id]]]]" method="get">
            <input type="hidden" name="page_id" value="[[*id]]" disabled="disabled" />
				[[+filters]]
            <button id="clear" class="btn btn-danger btn-sm" type="button" onclick="tmFilters.resetFilters(); return false;">Сбросить</button>
        </form>
           
      </div>
    </noindex>
      

      <!-- КАТАЛОГ -->
      <div class="col-xs-12 visible-xs">
        <div class="wp-pagenavi text-center">
          <ul class="pagination">[[!+page.nav]]</ul>
        </div>
      </div>
    
      <div id="products">
      [[!tmCatalog]]
      </div>
	  
	  
	  
	  <!--ФИЛЬТР НА МОБИЛЬНОЙ ВЕРСИИ-->
	  <noindex>
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      
      
      <!--Пагинация для мобильных устройств не Ajax-->
      <div class="container text-center visible-xs">
        <ul class="pagination">[[!+page.nav]]</ul>
      </div>
    
      <!--Пагинация для Декстопов на Ajax-->
      <div class="container text-center hidden-xs">
        <ul id="pages" class="pagination">[[!+page.nav]]</ul>
      </div>
    
      <div class="wp-pagenavi text-center">
        <div class="pages"><span class="label label-danger">Страница [[+page]] из [[+pageCount]]</span></div>
      </div>
     </div>
         
    </div>
	
	
	<hr class="visible-xs">
	
	<div class="container visible-xs">
		<button type="button" class="btn btn-default btn-lg btn-block" data-toggle="collapse" data-target="#demo">
			Фильтрация товаров
		</button>

		<div id="demo" class="panel-collapse collapse">
			 <div id="filters" class="container ">
           
           [[!tmFilters?
            &filterOuterTpl=`tm2_filterOuterTpl_select`
            &filterTpl=`tm2_filterTpl_select`
            &filterNumericOuterTpl=`tm2_filterOuterTpl`
            &filterNumericTpl=`tm2_filterNumericTpl`
            &jsMap=`1`
            &toPlaceholder=`filters`
            
            ]]
            
           
                <form action="[[~[[*id]]]]" method="get">
                  
              <input type="hidden" name="page_id" value="[[*id]]" disabled="disabled" />
                    
                    [[+filters]]
                    
                    <button id="clear" class="btn btn-danger btn-sm btn-block" type="button" onclick="tmFilters.resetFilters(); return false;">Сбросить</button>
                </form>
           
      </div>
		
		</div>
	</div>

	</noindex>


Проблема в том, что работает только один фильтр, фильтр который идет второй по структуре HTML «Ниже первого» он не работает почему то

Как решить данную проблему? Я не могу сообразить…
В блоке с мобильной версией я ставил просто " [[+filters]]"

Фильтры выводятся но не фильтруют. Как решить эту задачу?