How to change the element of select tag when adding new select tag

Please help me with this problem I want that when I select the option the element will show. But it happen it didn’t work even when I add new select tag the code didn’t work. Here is my code.

<div id="ugh">
<select class="handicap">
<option value="a"> Example 1</option>
<option value="b"> Example 2</option>
</select>
<div id="ahh">
<div class="row">
<div class="inputs">
</div>
</div>
</div>
</div>
<a id="sigepapa" class="fa fa-clone"></a>

<script>
$('#sigepapa').click(function(){
var ako ='';

ako += '<select class="handicap">';
ako += '<option value="a">Example 1</option>';
ako += '<option value="b"> Example 2</option>';
ako += '</select>';

ako += '<div id="ahh">';
ako += '<div class="row">';
ako += '<div class="inputs">';
ako += '</div>';
ako += '</div>';
ako += '</div>';

$('#ugh').append(ako);
});
</script>

<script>
$(document).ready(function()
{
 $('.handicap').change(function()
 {
  var val = $(this).val();

  if(val == 'a')
  { 
   $('#ahh').html('<div class="row"><div class="inputs"><input type="text" name="mc" class="ja"></div></div>');
  }
  else 
  {
   $('#ahh').html('<div class="row"><div class="inputs"><input type="text" name="cb" class="ja"></div></div>')
  }
 });
});
</script>

I want that when I select the element will show depending on the select value. And also when I add new select tag the element will show depending on the select value

Answer

$(document).ready triggers the first time when the DOM loads. So at that time there is only one node and event id bind to that node. When new node is added, the change event is not added with $(document).ready. You have to bind that namually as I did in your $('#sigepapa').click listner.

Also you have to have independent inputs for each and every select tags that were present initially aswell as created with clone. So rather than selecting element with id using $('#ahh'), you could use ahh as the classname. Because these elements will be present more than one time. Id is supposed to be unique, so better use class for this purpose.

This node can be selected on change of the select tag as the next element of the select. This select can be recieved using event.target from change event. That particular element will be $(e.target).next('.ahh') in this scenario

Working Fiddle

$("#sigepapa").click(function () {
  var ako = "";
  ako += '<select class="handicap">';
  ako += '<option value="a">Example 1</option>';
  ako += '<option value="b"> Example 2</option>';
  ako += "</select>";
  
  ako += '<div class="ahh">';
  ako += '<div class="row">';
  ako += '<div class="inputs">';
  ako += "</div>";
  ako += "</div>";
  ako += "</div>";

  $("#ugh").append(ako);
  bindEvents();
});

function bindEvents() {
  $(".handicap").change(function (e) {
    var val = $(this).val();
    if (val == "a") {
      $(e.target).next('.ahh').html(
        '<div class="row"><div class="inputs"><input type="text" name="mc" class="ja"></div></div>'
      );
    } else {
      $(e.target).next('.ahh').html(
        '<div class="row"><div class="inputs"><input type="text" name="cb" class="ja"></div></div>'
      );
    }
  });
}

$(document).ready(function () {
  bindEvents();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="ugh">
  <select class="handicap">
    <option value="a">Example 1</option>
    <option value="b">Example 2</option>
  </select>
  <div class="ahh">
    <div class="row">
      <div class="inputs"></div>
    </div>
  </div>
</div>
<a id="sigepapa" class="fa fa-clone">Clone</a>