Why does label stop working in ajax loading?

Question

JavaScript

Good afternoon. Several forms are loaded using ajax in tabs when clicking on a specific tab.

<ul>
<li><a id="ajax-form">Форма 1</a></li><!--кнопка 1 таба-->
<li><a id="ajax-form2">Форма 2</a></li><!--кнопка 2 таба-->
<li><a id="ajax-form3">Форма 3</a></li><!--кнопка 3 таба-->
<li><a id="ajax-form4">Форма 2</a></li><!--кнопка 4 таба-->
</ul>
  <div id="content"><!--контент таба 1-->
  </div>
  <div id="content2"><!--контент таба 2-->
</div>
  <div id="content3"><!--контент таба 3-->
</div>
 <div id="content4"><!--контент таба 4-->
</div>

ajax:

$('#ajax-form').click(function(e){
    e.preventDefault();
    $.ajax({
    type: "POST",
    url: 'form.html',
    cache: false,
    success: function(data) {
    $('#content').html(data);
    }
    });
.....

After clicking on the first tab button, the first form is loaded, and after clicking on the second tab button, the second form is loaded, and so on ... But after I switch back to the first tab, the label in the form stops working.
Example label in the form:

<span class="radio-btn">
       <input type="radio" id="radio25" name="dynamic_10[]" value="3">
       <label for="radio25">да</label>
</span>
<span class="radio-btn">
        <input type="radio" id="radio26" name="dynamic_10[]" value="4">
  <label for="radio26">нет</label>
</span>

Why does label stop working in ajax loading?

Answer 1

In general, I would approach your question from the other side:
https://jsfiddle.net/54q5x90j/

<ul>
<li><a class="ajax-form" data-form="form1.html" data-content="#content">Форма 1</a></li><!--кнопка 1 таба-->
<li><a class="ajax-form" data-form="form2.html" data-content="#content2">Форма 2</a></li><!--кнопка 2 таба-->
<li><a class="ajax-form" data-form="form3.html" data-content="#content3">Форма 3</a></li><!--кнопка 3 таба-->
<li><a class="ajax-form" data-form="form4.html" data-content="#content4">Форма 2</a></li><!--кнопка 4 таба-->
</ul>
  <div id="content"><!--контент таба 1-->
  </div>
  <div id="content2"><!--контент таба 2-->
</div>
  <div id="content3"><!--контент таба 3-->
</div>
 <div id="content4"><!--контент таба 4-->
</div>

$('.ajax-form').on('click',function(e){
    e.preventDefault();
    var form = $(this).data('form');
    var content = $(this).data('content');
    $.ajax({
    	type: "POST",
   		url: form,
    	cache: false,
    	success: function(data) {
    		 $(content).html(data); 
    	},
    	error: function(data) {
    		$(content).html('data-err');
            
    	}
    });
});

Well, the label does not work, most likely due to the fact that the id to which it refers is duplicated
Point the code of all forms

Answer 2

Most likely because each time a click on a tab causes a new markup from the server, and the id must be unique. If you want to solve the problem quickly, I suggest this markup:

<span class="radio-btn">
       <label><input type="radio" name="dynamic_10[]" value="3"> да</label>
</span>
<span class="radio-btn">
       <label><input type="radio" name="dynamic_10[]" value="4"> нет</label>
</span>

In general, I will say that without knowing the context of the task, it is difficult for me to offer a solution, but I don’t like the idea of ​​\u200b\u200bdriving markup back and forth