Adding input fields and setting their ids dynamically

$(document).ready(function() {
  function getData1() {
    var innerhtml1 = $('.load1').html();
    $('.main_div').append(innerhtml1);
  }
  getData1();

  $(document).on('click', '.add_question', function() {
    let lengthQstn = $('.main_div').children().length;
    let questionHtml = $('.load1').html();
    let appendQstn = questionHtml.replace(/0/g, lengthQstn).replace(/add_question/g, "remove_question").replace(/add question/g, "remove question");
    $('.main_div').append(appendQstn);
  })

  $(document).on('click', '.add_option', function() {
    var dataParent = $(this).attr('data-parent');
    let lengthOpt = $("#option_" + dataParent).children().length;
    lengthOpt++;
    var dataParent = $(this).attr('data-parent');
    let optionHtml = $('.load2').html();
    let appendOpt = optionHtml.replace(/count/g, lengthOpt).replace(/0/g, dataParent);
    $("#option_" + dataParent).append(appendOpt);
  })

  $(document).on('click', '.remove_question', function() {
    var dataParent = $(this).attr('data-parent');
    $("#question_" + dataParent).remove();
  })

  $(document).on('click', '.remove_option', function() {
    var dataParent = $(this).attr('data-parent');
    var dataIndex = $(this).attr('data-id');
    $("#row_" + dataParent + '_' + dataIndex).remove();
  })
})

.hide {
  display: none;
}

.remove_option,
.remove_question {
  background-color: rgb(204, 177, 177);
}

.add_question,
.add_option {
  background-color: rgb(201, 233, 222);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>

<div class="container">
  <center>
    <h2>New Form</h2>
  </center>
  <div class="main_div">
  </div>
</div>
<div class="load1 hide">
  <div class="parent_div mb-5 mt-5" id="question_0">
    <div class="div1">
      <div class="row">
        <div class="col-6">
          <label id="question_0">Question_0</label>
          <input type="text" name="question_0" id="question_0" class="form-control">
        </div>
        <div class="col-3">
          <button id="add_question_0" class="form-control add_question mt-4" data-parent="0">add_question</button>
        </div>
      </div>
    </div>
    <div class="div2" id="option_0">
      <div class="row" id="row_0_1">
        <div class="col-6">
          <label id="option_0_1">option_0_1</label>
          <input type="text" name="option_0_1" id="option_0_1" class="form-control">
        </div>
        <div class="col-3">
          <button id="add_option_0" class="form-control add_option mt-4" data-parent="0">add
                            option</button>
        </div>
      </div>
      <div class="row" id="row_0_2">
        <div class="col-6">
          <label id="option_0_2">option_0_2</label>
          <input type="text" name="option_0_2" id="option_0_2" class="form-control">
        </div>
      </div>
    </div>
  </div>
</div>
<div class="load2 hide">
  <div class="row" id="row_0_count">
    <div class="col-6 option_0_count">
      <label id="option_0_count">option_0_count</label>
      <input type="text" name="option_0_count" id="option_0_count" class="form-control">
    </div>
    <div class="col-3">
      <button id="remove_option_count" class="form-control remove_option mt-4" data-parent="0" data-id="count">remove option</button>
    </div>
  </div>
</div>