使用html和jquery动态生成主div

Question

我希望#roww id每次都应该是唯一的......比如roww1，roww2等请帮助。感谢你。那个行是我的主要容器............... 我不想制作内部div的唯一ID，即折扣关税，实际关税等......只需要roww的唯一ID

＆＃13;

＆＃13;

  var i = 1;
  var row = $('#row-container').clone();
$('#addButton').data('#roww',row);
$('#addButton').click(function(){
  $('#row-container').append($(this).data('#roww').clone());
});
$('#removeButton').click(function(){
  $('#row-container #roww').eq(  $('#row-container #roww').length-1 ).remove();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="col-md-12">
        <div class="select-box">
  <input type='button' class="btn btn-primary" value='Add Loaction' id='addButton'>
  <input type='button' class="btn btn-danger" value='Remove' id='removeButton'>
</div><br>

<div id="row-container">
  <div id="roww">
<div class="row">
  <div class="col-md-6">
    <div class="form-group">
      <input type="text" class="form-control" id="location" name="size" placeholder="Location" />
    </div>
  </div>
  <div class="col-md-6">
    <div class="form-group">
      <input type="text" class="form-control" id="apt_name" name="clr" placeholder="Apartment Type" />
    </div>
  </div>
</div>
  
  <div class="row">
  <div class="col-md-6">
    <div class="form-group">
      <input type="text" class="form-control" id="act_tariff" name="qty" placeholder="Actual Tariff" />
    </div>
  </div>
  <div class="col-md-6">
    <div class="form-group">
      <input type="text" class="form-control" id="dcnt_tariff" name="qty" placeholder="Discount Tariff" />
    </div>
  </div>
</div>
  
</div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试使用每次点击递增的计数器变量来制作唯一ID：

var cont= 0
$('#addButton').click(function(){
  var newId= "roww"+cont
  console.log(newId)
  $('span').append("<br>");
  $('span').append($('.row-container:first').clone());
  $('.row-container:last').find("#roww").attr("id",newId);
  cont++
  
});
$('#removeButton').click(function(){
  $('.row-container:last').remove();
  cont--
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="col-md-12">
        <div class="select-box">
  <input type='button' class="btn btn-primary" value='Add Loaction' id='addButton'>
  <input type='button' class="btn btn-danger" value='Remove' id='removeButton'>
</div><br>

<div class="row-container">
  <div id="roww">
<div class="row">
  <div class="col-md-6">
    <div class="form-group">
      <input type="text" class="form-control" id="location" name="size" placeholder="Location" />
    </div>
  </div>
  <div class="col-md-6">
    <div class="form-group">
      <input type="text" class="form-control" id="apt_name" name="clr" placeholder="Apartment Type" />
    </div>
  </div>
</div>
  
  <div class="row">
  <div class="col-md-6">
    <div class="form-group">
      <input type="text" class="form-control" id="act_tariff" name="qty" placeholder="Actual Tariff" />
    </div>
  </div>
  <div class="col-md-6">
    <div class="form-group">
      <input type="text" class="form-control" id="dcnt_tariff" name="qty" placeholder="Discount Tariff" />
    </div>
  </div>
</div>
  
</div>
</div>
</div>
<span></span>