There is such a layout; they have the same structure. When you click on the .component_option_thumbnail_tap element, the .component_option_thumbnail_tap class is added to the .selected element (the addition of a class is implemented by another script).
Our task is after clicking on .component_option_thumbnail_tap find .component_option_thumbnail and check for the presence of the class .selected . If true, clone .thumbnail_price into .component_title . At the same time, the "inheritance" of elements should be preserved, as well as if you click several times on .component_option_thumbnail_tap , it should not be cloned (i.e., when you click, we check for .thumbnail_price in .component_title ) - if there is, then we do not clone, if not, we clone.
<form method="post" class="cart"> <div class="component"> <div class="component_title_wrapper"> <h3 class="component_title product_title"> <span class="step_index">1</span> <span class="step_title">Категория 1</span> <span class="toggle_component_wrapper"> <a class="toggle_component" href="#"> <span class="toggle_component_text">Toggle</span> </a> </span> </h3> </div> <div class="component_inner"> <div class="block_component"></div> <div class="component_description_wrapper"></div> <div class="component_selections"> <div class="component_selections_inner"> <div class="block_component_selections_inner"></div> <div class="component_options" style=""> <div class="component_options_inner cp_clearfix"> <div class="component_option_thumbnails"> <ul class="component_option_thumbnails_container"> <li class="component_option_thumbnail_container first"> <div class="component_option_thumbnail selected"> <a class="component_option_thumbnail_tap" href="#"></a> <div class="image thumbnail_image"> <img width="300" height="200" src="http://"> </div> <div class="thumbnail_description"> <h5 class="thumbnail_title title">Элемент</h5> <span class="thumbnail_price price"> <span class="amount">700</span> </span> </div> </div> </li> </ul> <div class="cp_clearfix"></div> </div> <div class="component_options_select_wrapper"> <select class="component_options_select"> <option class="empty" data-title="None" value="">None</option> <option >Элемент - цена</option> </select> </div> <div class="cp_clearfix"></div> </div> </div> <div class="component_pagination"> <div class="pagination_data"></div> </div> </div> <div class="component_content"> <div class="component_summary cp_clearfix"> <div class="product content summary_content"> <div class="component_data"></div> </div> </div> </div> <div class="component_message bottom"> <ul class="msg woocommerce-info"></ul> </div> </div> <div class="composite_navigation bottom progressive standard"> <div class="composite_navigation_inner"> <a class="page_button prev invisible" href="#"></a> <a class="page_button next" href="#">Next – Следующая категория</a> </div> </div> </div> </div> <div class="component"> <!-- Категория 2 --> </div> <div class="component"> <!-- Категория 3 --> </div> <div class="component"> <!-- Категория 4 --> </div> </form> Thank you in advance. Not enough knowledge in jquery .
