Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 67441

how to manage input tags using bootstrap

$
0
0

I want to add more btn in jQuery input is going random, I just want it in sequence

current output:

enter image description here

I want this output:

enter image description here

$(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>

Viewing all articles
Browse latest Browse all 67441

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>