Есть вот такой элемент:
$(document).on('click', '.dropdown_services_link', function() {
let text = $(this).text();
$(this).parent().parent().prev().text(text);
$('.dropdown_button_add_services__container').show();
})
$(document).on('click', '.dropdown_button_add_services', function() {
$(this).parent().prev().after($(this).parent().prev().clone().css({
'marginTop': '15px'
}));
})
$(document).on('shown.bs.dropdown', '.dropdown_services', function() {
$(this).children().eq(0).addClass('button_services__opened');
})
$(document).on('hidden.bs.dropdown', '.dropdown_services', function() {
$(this).children().eq(0).removeClass('button_services__opened');
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<div class="order-info order-info__date">
<div class="order-info__header">
<span>Дополнительные услуги</span>
</div>
<div class="order-info__inner order-info__inner___dropdown">
<div class="dropdown dropdown_services">
<button class="btn dropdown-toggle button_services" type="button" id="dropdownServices" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Выберите услугу
</button>
<ul class="dropdown-menu dropdown_services_menu" aria-labelledby="dropdownServices">
<li class="dropdown_services_item">
<a href="javascript:void(0);" class="dropdown_services_link">Колеровка</a>
</li>
<li class="dropdown_services_item">
<a href="javascript:void(0);" class="dropdown_services_link">Оверлок</a>
</li>
<li class="dropdown_services_item">
<a href="javascript:void(0);" class="dropdown_services_link">Установка</a>
</li>
<li class="dropdown_services_item">
<a href="javascript:void(0);" class="dropdown_services_link">Демонтаж</a>
</li>
<li class="dropdown_services_item">
<a href="javascript:void(0);" class="dropdown_services_link">Колеровка</a>
</li>
<li class="dropdown_services_item">
<a href="javascript:void(0);" class="dropdown_services_link">Оверлок</a>
</li>
<li class="dropdown_services_item">
<a href="javascript:void(0);" class="dropdown_services_link">Установка</a>
</li>
<li class="dropdown_services_item">
<a href="javascript:void(0);" class="dropdown_services_link">Демонтаж</a>
</li>
<li class="dropdown_services_item">
<a href="javascript:void(0);" class="dropdown_services_link">Колеровка</a>
</li>
<li class="dropdown_services_item">
<a href="javascript:void(0);" class="dropdown_services_link">Оверлок</a>
</li>
<li class="dropdown_services_item">
<a href="javascript:void(0);" class="dropdown_services_link">Установка</a>
</li>
<li class="dropdown_services_item">
<a href="javascript:void(0);" class="dropdown_services_link">Демонтаж</a>
</li>
</ul>
</div>
<div class="dropdown_button_add_services__container">
<div class="dropdown_button_add_services">
<svg class="dropdown_button_add_services_svg" width="24" height="24" viewBox="0 0 24 24" fill="#0078D7" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 11H13V9C13 8.45 12.55 8 12 8C11.45 8 11 8.45 11 9V11H9C8.45 11 8 11.45 8 12C8 12.55 8.45 13 9 13H11V15C11 15.55 11.45 16 12 16C12.55 16 13 15.55 13 15V13H15C15.55 13 16 12.55 16 12C16 11.45 15.55 11 15 11ZM12 20C7.589 20 4 16.411 4 12C4 7.589 7.589 4 12 4C16.411 4 20 7.589 20 12C20 16.411 16.411 20 12 20ZM12 2C6.486 2 2 6.486 2 12C2 17.514 6.486 22 12 22C17.514 22 22 17.514 22 12C22 6.486 17.514 2 12 2Z" fill="#0078D7"/>
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="20" height="20">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 11H13V9C13 8.45 12.55 8 12 8C11.45 8 11 8.45 11 9V11H9C8.45 11 8 11.45 8 12C8 12.55 8.45 13 9 13H11V15C11 15.55 11.45 16 12 16C12.55 16 13 15.55 13 15V13H15C15.55 13 16 12.55 16 12C16 11.45 15.55 11 15 11ZM12 20C7.589 20 4 16.411 4 12C4 7.589 7.589 4 12 4C16.411 4 20 7.589 20 12C20 16.411 16.411 20 12 20ZM12 2C6.486 2 2 6.486 2 12C2 17.514 6.486 22 12 22C17.514 22 22 17.514 22 12C22 6.486 17.514 2 12 2Z" fill="white"/>
</mask>
<g mask="url(#mask0)">
</g>
</svg>
<div class="dropdown_button_add_services_link">
<a href="javascript:void(0);" class="dropdown_button_add_services_link___button">Добавить услугу</a>
</div>
</div>
</div>
</div>
</div>
Выполненный через dropdown
от bootstrap.
Не могу понять, почему в мобильной версии не отрабатывает вот эта конструкция $(this).parent().parent().prev().text(text);
с десктопа всё ок.