动态地改变任何标签的id属性无数次

Question

$("#add_driver").click(function() {
  $("#add_driver_section").replaceWith("<div class='wrap-input100 validate-input bg1 rs1-wrap-input100' ><span class='label-input100'>Gender</span><div class='contact100-form-radio m-t-15'> <input class='input-radio100' id='radio1' type='radio' name='type- product[]' value='male' checked='checked' > <label class='label-radio100' for='radio1'> Male </label></div><div class='contact100-form-radio'> <input class='input-radio100' id='radio2' type='radio' name='type-product[]' value='female'> <label class='label-radio100' for='radio2'> Female </label> </div></div>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap-input100 validate-input bg1 rs1-wrap-input100">
  <span class="label-input100">Gender</span>
  <div class="contact100-form-radio m-t-15">
    <input class="input-radio100" id="radio1" type="radio" name="type-product[]" value="male" checked="checked">
    <label class="label-radio100" for="radio1">
      Male
    </label>
  </div>

  <div class="contact100-form-radio">
    <input class="input-radio100" id="radio2" type="radio" name="type-product[]" value="female">
    <label class="label-radio100" for="radio2">
      Female
    </label>
  </div>
</div>

I need to change the id of the radio button everytime this function is called.

There is no count to how many times the checkboxes will be dynamically created. I do not want a very complex code. Just something simple and easy to understand.

</div>

Answer 1

Just add some counter in js and use it as a number in id

var count = 3;

$("#add_driver").click(function() {
  $("#add_driver_section").append("<div class='wrap-input100 validate-input bg1 rs1-wrap-input100' ><span class='label-input100'>Gender</span><div class='contact100-form-radio m-t-15'> <input class='input-radio100' id='radio" + count + "' type='radio' name='type-product[]' value='male' checked='checked' > <label class='label-radio100' for='radio" + count + "'> Male </label></div><div class='contact100-form-radio'> <input class='input-radio100' id='radio" + ++count + "' type='radio' name='type-product[]' value='female'> <label class='label-radio100' for='radio" + count + "'> Female </label> </div></div>");
  count++;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap-input100 validate-input bg1 rs1-wrap-input100">
  <span class="label-input100">Gender</span>
  <div class="contact100-form-radio m-t-15">
    <input class="input-radio100" id="radio1" type="radio" name="type-product[]" value="male" checked="checked">
    <label class="label-radio100" for="radio1">
      Male
    </label>
  </div>

  <div class="contact100-form-radio">
    <input class="input-radio100" id="radio2" type="radio" name="type-product[]" value="female">
    <label class="label-radio100" for="radio2">
      Female
    </label>
  </div>
</div>

<button id="add_driver">Add driver</button>

<section id="add_driver_section"></section>

I hope this is what you want to achieve. If not, then let me know.

EDIT

If you want those radio buttons not to act as one radio set, then you need to give them different number.

Here is an example

var count = 3;

$("#add_driver").click(function() {
  $("#add_driver_section").append("<div class='wrap-input100 validate-input bg1 rs1-wrap-input100' ><span class='label-input100'>Gender</span><div class='contact100-form-radio m-t-15'> <input class='input-radio100' id='male-radio" + count + "' type='radio' name='type-product-" + count + "[]' value='male' checked='checked' > <label class='label-radio100' for='male-radio" + count + "'> Male </label></div><div class='contact100-form-radio'> <input class='input-radio100' id='female-radio" + count + "' type='radio' name='type-product-" + count + "[]' value='female'> <label class='label-radio100' for='female-radio" + count + "'> Female </label> </div></div>");
  count++;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap-input100 validate-input bg1 rs1-wrap-input100">
  <span class="label-input100">Gender</span>
  <div class="contact100-form-radio m-t-15">
    <input class="input-radio100" id="radio1" type="radio" name="type-product[]" value="male" checked="checked">
    <label class="label-radio100" for="radio1">
      Male
    </label>
  </div>

  <div class="contact100-form-radio">
    <input class="input-radio100" id="radio2" type="radio" name="type-product[]" value="female">
    <label class="label-radio100" for="radio2">
      Female
    </label>
  </div>
</div>

<button id="add_driver">Add driver</button>

<section id="add_driver_section"></section>

</div>