JSFiddle - React, Tailwind, and code Playground

by vovkasolovev

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<html class="ua_mobile">

<div id="pl-476" class="panel-layout"><div id="pg-476-0" class="panel-grid panel-no-style already-visible slide_up"><div id="pgc-476-0-0" class="panel-grid-cell"><div id="panel-476-0-0-0" class="so-panel widget widget_sow-headline panel-first-child" data-index="0"><div class="so-widget-sow-headline so-widget-sow-headline-default-a06dfc9d1a78"><div class="sow-headline-container ">
	<h2 class="sow-headline">Ассортимент никелевых прутков и поковок</h2><h5 class="sow-sub-headline">Поставляем никелевые прутки и поковки из наличия и под заказ.</h5></div></div></div><div id="panel-476-0-0-1" class="so-panel widget widget_sow-editor panel-last-child" data-index="1"><div class="so-widget-sow-editor so-widget-sow-editor-base">
<div class="siteorigin-widget-tinymce textwidget">
<table id="tablepress-nikelevie-prutki" class="tablepress tablepress-id-nikelevie-prutki">
<caption style="caption-side:bottom;text-align:left;border:none;background:none;margin:0;padding:0;"><a href="https://super-splav.ru/wp-admin/admin.php?page=tablepress&amp;action=edit&amp;table_id=nikelevie-prutki">Изменить</a></caption>
<tbody>
<tr class="row-1">
	<td rowspan="24" class="column-1"><img src="/wp-content/themes/podhod_variant/img/variant-ill-prutki.png" alt="Прутки из никелевых сплавов" class="alignnone size-full wp-image-1124 variant-ill"></td><td colspan="2" class="column-2"><strong>Диаметр</strong>  от 5 до 1000 мм</td>
</tr>
<tr class="row-2">
	<td class="column-2"><strong>Основные марки</strong></td><td class="column-3"><strong>Технические требования</strong></td>
</tr>
<tr class="row-3">
	<td class="column-2">НП2 / НП3 / <nobr>Alloy 200</nobr> / <nobr>Nickel 200</nobr> / N02200 / 2.4060, 2.4066</td><td class="column-3">ГОСТ 13083 / ASTM B160, B564</td>
</tr>
</tbody>
</table>
</div></div></div></div></div>

<div id="pg-476-1" class="panel-grid panel-no-style already-visible...

JavaScript

if ( true ) {
$('#variant_calculator').css( "background-color", "red" );
			//$('#variant_calculator').insertBefore($('.tablepress.dataTable').parent().prev().filter(":first"));
		//	$('#variant_calculator').insertBefore($('.tablepress.dataTable').parent().first());
$("#variant_calculator").each(function() {
$(this).insertBefore($('.tablepress.dataTable').parent().first()); //Сперва ищем H2 в верхнем этаже
$(this).insertBefore($('.tablepress.dataTable').closest(".so-panel").prev().find("h2"));
$(this).insertBefore($('.tablepress.dataTable').closest(".so-panel").find("h2"));
});
			
			/* $("#variant_calculator").each(function() {
				$('.tablepress.dataTable').parent().closest('so-panel h2').before(this);
			}); */
			
			$('.VariantCalculatorWidget').hide(0);
			$toggleButton.show(0);
			VariantCalculatorOff();
			console.log('!2');
    } else {
			$('#variant_calculator').insertAfter($('.VariantCalculatorWidget .widgettitle'));
			$('.VariantCalculatorWidget').show(0);
			$toggleButton.hide(0);
			VariantCalculatorOn();
    };