Как передать параметр из div вподгружаемый в него контент?

[Vaska]

Приветствую!
На странице HTML есть DIVы, в цикле, в которые подгружается свой контент.
У каждого DIV свой параметр data-id.
Это DIV:

<div data-type="load">
	{foreach name='config_list' item='item' key="key"}
	<div data-type="config" data-id="{$key+1}" style="display:none">
		{$item.config|raw}
	</div>
	{/foreach}
</div>

Это контент:

<form class="form-h5_1" onchange="changeForm($(this),1)" novalidate="novalidate">
		<input type="hidden" name="model_id" value="1">
	</form>
	<script>
		$(function(){
			$('.form-h5_1').validate({
				//
			});			
		})
	</script>

В итоге загрузки контента в блок DIV получается так:

<div data-type="config" data-id="4" style="display: block;">
	<form class="form-h5_1" onchange="changeForm($(this),1)" novalidate="novalidate">
		<input type="hidden" name="model_id" value="1">
	</form>
	<script>
		$(function(){
			$('.form-h5_1').validate({
				//
			});			
		})
	</script>	
</div>

Нужно передать значение параметра data-id из DIV в подгружаемый контент, чтобы я мог значение параметра data-id применить в подгружаемом контенте, а именно для персонализации каждой формы и её валидации.
Примерно так:

<div data-type="config" data-id="1" style="display: block;">
	<form class="form-h5_1_1" onchange="changeForm($(this),1)" novalidate="novalidate">
		<input type="hidden" name="model_id" value="1">
	</form>
	<script>
		$(function(){
			$('.form-h5_1_1').validate({
				//
			});			
		})
	</script>	
</div>
<div data-type="config" data-id="2" style="display: block;">
	<form class="form-h5_1_2" onchange="changeForm($(this),1)" novalidate="novalidate">
		<input type="hidden" name="model_id" value="1">
	</form>
	<script>
		$(function(){
			$('.form-h5_1_2').validate({
				//
			});			
		})
	</script>	
</div>
<div data-type="config" data-id="3" style="display: block;">
	<form class="form-h5_1_3" onchange="changeForm($(this),1)" novalidate="novalidate">
		<input type="hidden" name="model_id" value="1">
	</form>
	<script>
		$(function(){
			$('.form-h5_1_3').validate({
				//
			});			
		})
	</script>	
</div>
<div data-type="config" data-id="4" style="display: block;">
	<form class="form-h5_1_4" onchange="changeForm($(this),1)" novalidate="novalidate">
		<input type="hidden" name="model_id" value="1">
	</form>
	<script>
		$(function(){
			$('.form-h5_1_4').validate({
				//
			});			
		})
	</script>	
</div>

Заранее спасибо откликнувшимся!

[рони]

Vaska,
из поставленной задачи data-id ненужный атрибут.

$(function(){
            let form = $('.form-h5_1:first');
           //let data_id = form.parent().data('id');
           // console.log(data_id);
            form.removeClass('form-h5_1');
			form.validate({
				//
			});
		})

[Vaska]

$(function(){
            let form = $('.form-h5_1:first');
           //let data_id = form.parent().data('id');
           // console.log(data_id);
            form.removeClass('form-h5_1');
			form.validate({
				//
			});
		})

Я вставил этот код в контент, но он только удаляет класс из тега form и больше ничего не происходит.
Получается так

<form class="" onchange="changeForm($(this),1)">

Валидация работает, но другие скрипты не работают из за удаления класса из формы.
В контенте есть ещё код, который инициализирует другие скрипты и тоже использует класс:

<div data-type="config" data-id="4" style="display: block;">
	<form class="form-h5_1" onchange="changeForm($(this),1)" novalidate="novalidate">
		<input type="hidden" name="model_id" value="1">
	</form>
	<script>
		// Валидация class через механизм (в реальном времени)
		window.validation.init({
			container: '.form-h5_1'
		});
		
		// Ручная валидация class (при нажатии кнопки Сохранить)
		$('.save-button').on('click', function () {
			window.validation.isValid({ container: '.form-h5_1' })
			$('.form-h5_1').valid()
		});
		
		$(function(){

				let form = $('.form-h5_1:first');
				//let data_id = form.parent().data('id');
				// console.log(data_id);
				form.removeClass('form-h5_1');
				form.validate({
					//
				});
					
		})
	</script>	
</div>

Я ориентировался на то, что у меня будет переменная, которую я повстававляю к классам в коде, типа этого '.form-h5_1_'+data_id+''.
А ваш вариант я не знаю как применить.
Можете поправить, чтобы работало с учётом выше указанного кода?

[рони]

Vaska,
вариант был для предоставленного выше кода. раз вам удобнее с data_id, то делайте как вам удобно.
пост #3 я не осилил.
но как-то так

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

</head>

<body>
<div data-type="config" data-id="4" style="display: block;">
	<form class="form-h5_1" onchange="changeForm($(this),1)" novalidate="novalidate">
		<input type="hidden" name="model_id" value="1">
	</form>
	<script>
		$(function(){
            let form = $('.form-h5_1:first');
            let data_id = form.parent().data('id');
            let cls = `form-h5_1_${data_id}`
            form.removeClass('form-h5_1').addClass(cls);

		   /*	form.validate({
				//
			});*/
		})
	</script>
</div>
<div data-type="config" data-id="7" style="display: block;">
	<form class="form-h5_1" onchange="changeForm($(this),1)" novalidate="novalidate">
		<input type="hidden" name="model_id" value="1">
	</form>
	<script>
	  	$(function(){
            let form = $('.form-h5_1:first');
            let data_id = form.parent().data('id');
            let cls = `form-h5_1_${data_id}`
            form.removeClass('form-h5_1').addClass(cls);

		   /*	form.validate({
				//
			});*/
		})
	</script>
</div>

</body>
</html>

[Vaska]

рони,
Да, это то, что надо!
Всё работает.
Большое спасибо!