I want to add more btn
in jQuery
input is going random, I just want it in sequence
current output:
I want this output:
$(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>