как управлять входными тегами с помощью начальной загрузки

Question

вход add more btn в jQuery идет случайным образом, я просто хочу его в последовательности ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, *

токовый выход:

Я хочу этот вывод:

$(document).ready(function() {
  var getText = function(opt) {};

  var temp = $("#hidDays").val();

  //Add More Groups
  $("#main-wrapper").on("click", ".addGroupBtn", function() {
    console.log("fsdfa");
    var template = $("#timeGroupTemplate");
    var btnTemplate = $("<div/>").append($("#btnTemplate").html());
    var div = $("<div/>").append(template.html());
    btnTemplate.find(".addGroupBtn").remove();

    $("#periodDiv")
      .find(".timePeriodDiv")
      .find(".addRemBtn")
      .html(btnTemplate.html());
    $("#periodDiv")
      .find(".timePeriodDiv")
      .last()
      .after(div.html());
  });

  //Remove More Groups
  $("#main-wrapper").on("click", ".removeGroupBtn", function() {
    var btnTemplate = $("<div/>").append($("#btnTemplate").html());
    $(this)
      .parents(".timePeriodDiv")
      .remove();
    var template = $(".timePeriodDiv").length;
    if (template === 2) {
      btnTemplate.find(".removeGroupBtn").remove();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div id="main-wrapper">

  <div id="periodDiv">

    <div class="form-group timePeriodDiv">
      <div class="form-group-inside">
        <div class="col-md-2">
          <div class="input-group input-append bootstrap-timepicker">
            <input type="file" class="form-control timepicker startTime add-on" name="startTime" value="">
          </div>
        </div>
      </div>
      <div class="col-md-2 addRemBtn">
        <a class="btn btn-primary fa fa-minus removeGroupBtn" href="javascript:;"></a>
      </div>
      <div class="col-md-2 addRemBtn" style="margin-left: -230px;;">
        <a class="btn btn-primary fa fa-plus addGroupBtn" href="javascript:;"></a>
      </div>
    </div>

  </div>



  <!---------------------->
  <div class="hide" id="timeGroupTemplate">
    <div class="form-group timePeriodDiv">
      <div class="form-group-inside">
        <label class="col-md-2 control-label"></label>
        <div class="col-md-2">
          <div class="input-group input-append bootstrap-timepicker">
            <input type="file" class="form-control timepicker startTime add-on" name="startTime">
          </div>
        </div>
      </div>
      <div class="form-group-inside">
        <label class="col-md-2 control-label"></label>
        <div class="col-md-2">
          <div class="input-group input-append bootstrap-timepicker">
            <input type="file" class="form-control timepicker endTime add-on" name="endTime">
          </div>
        </div>
      </div>
      <div class="col-md-2 addRemBtn">
        <a class="btn btn-primary fa fa-minus removeGroupBtn" href="javascript:;"></a>
        <a class="btn btn-primary fa fa-plus addGroupBtn" href="javascript:;"></a>
      </div>
    </div>
  </div>
  <div id="btnTemplate" class="hide">
    <a class="btn btn-primary fa fa-minus removeGroupBtn" href="javascript:;"></a>
    <a class="btn btn-primary fa fa-plus addGroupBtn" href="javascript:;"></a>
  </div>
</div>

Answer 1

внести некоторые изменения в ваш код может достичь этого

$(document).ready(function() {
  var template =`<div class="form-group-inside">
        <div class="col-md-2">
          <div class="input-group input-append bootstrap-timepicker">
            <input type="file" class="form-control timepicker startTime add-on" name="startTime" value="">
          </div>
        </div>
        <div class=" addRemBtn">
        <a class="btn btn-primary fa fa-minus removeGroupBtn" href="javascript:;">-</a>
      </div>
      </div>`;
  //Add More Groups
  $("#main-wrapper").on("click", ".addGroupBtn", function() {
    $(".form-grp").append(template);
  });

  //Remove More Groups
  $("#main-wrapper").on("click", ".removeGroupBtn", function() {
 
  $(this).parent().parent().remove();
    
  });
  
  $(".addGroupBtn").click();
});

.form-group-inside {
  display:flex;
}
#main-wrapper {
  display:flex;
  align-items: flex-end;
}
.addRemBtn {
  width:100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div id="main-wrapper">

    <div class="form-grp">
    </div>
  <div class="addRemBtn">
    <button class="btn btn-primary fa fa-plus addGroupBtn">+</button>
   </div>
  </div>