The sequence of the add more btn in jQuery input seems to be random, but I want it to be in a specific order.
Current Output:
https://i.sstatic.net/mGfPT.png
Desired Output:
The sequence of the add more btn in jQuery input seems to be random, but I want it to be in a specific order.
Current Output:
https://i.sstatic.net/mGfPT.png
Desired Output:
To achieve this, make some modifications in your code
$(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>`;
//Adding More Groups
$("#main-wrapper").on("click", ".addGroupBtn", function() {
$(".form-grp").append(template);
});
//Removing 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>
Currently, I am exploring the possibility of combining jQuery and PHP code. Specifically, I want to extract a URL value using jQuery and then use PHP to check if that specific site exists. It is crucial for me to utilize jQuery in this scenario. Addition ...
I keep getting recommendations from Google's PageSpeed Insights to avoid using links for CSS files and instead include the styles directly under a style tag. I'm wondering if there is a way in Jade to specify a CSS file and have its contents pull ...
Having an issue with my PHP form, it's only sending field names instead of data to the email address. Here is a simplified version of the code: <?php $ToEmail = 'example@example.com'; $EmailSubject = 'Site contact form'; $ma ...
Check out this cool plunker import {Component} from 'angular2/core' @Component({ selector: 'my-app', template: ` <div *ngFor="#option of myHashMap"> <input type="radio" name="myRadio" id="{{generateId(option[& ...
I am working with a model in Django that has a ForeignKey pointing to itself, and I need to display all the data from the database using lists and sublists: Below is my model definition: class Place(models.Model) name = models.CharField(max_length=1 ...
When using bootstrap button styled labels and links with a larger height than default, the text tends to be vertically aligned at the upper side of the button. However, when using an actual button element, the text is centered vertically. Is there a way t ...
I've been struggling to vertically center the menu items "TEST 1","TEST 2" and "BRAND" within the navigation bar without any luck. I've experimented with vertical-align, margin-top, and bottom properties. What I'm aiming for is to have them ...
One thing I'm considering is the process of dynamically changing element names in the DOM with JavaScript or jQuery when adding or removing child elements. For instance, if I decide to delete the second text box from a form that originally has three t ...
I've implemented the collapse feature using Bootstrap, but encountered an issue where my nav elements disappear when resizing the window. Do you have any suggestions on how to fix this? Here's a snippet of my code: Navb ...
Question about HTML: How can I add a text box or block to an HTML page that is filled with plain text? I want the text box to align to the right and be surrounded by the plain text, essentially wrapping around it. I also need to specify the dimensions of ...
I'm having an issue with posting data via AJAX to PHP. The original data is pulled in using JavaScript, like this: var taskID = jQuery(this).attr('data-id'); var taskTitle = jQuery(this).attr('data-title'); var taskContent = jQuer ...
I am just venturing into the realm of web development (although I am not new to coding), so please bear with me. For my project, I decided to use Django and integrated some free Bootstrap themes that I stumbled upon online. While working on my home page, ...
I'm facing an issue with my HTML form that needs to upload 3 parts to an existing REST API in a single request. The problem lies in setting a boundary on a FormData submission and I haven't been able to find relevant documentation for it. I&apos ...
When creating a DOM element, I am following this process: var imgEle = document.createElement('img'); imgEle.src = imgURL; x.appendChild(imgEle); Instead of appending the last line which creates multiple img elements ev ...
This is a snippet of my HTML and PHP code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Gallery</title> <script src="js/jquery-1.7.2.min.js"></script> <script ...
My login form needs to either close the lightbox or update the error box based on the success of the login attempt. I suspect the issue lies with the onclick="formhash(this.form, this.form.password);" which is a JavaScript function that hashes a passwor ...
var number = 1; $("#counter input").attr('value', number); $("#increase").click(function(){ $("#counter input").attr('value', number++); }); $("#decrease").click(function(){ $("#counter input").attr('value', number--); }); ...
My current challenge involves utilizing Flexbox to create a responsive layout with 5 boxes that shrink when the browser window is resized. However, 4 of these boxes are not reducing their width as expected when placed in columns. (Despite Bob behaving cor ...
Whilst composing the subsequent operations @a: 2px @variable: @a + 5; .margin-style{ margin-left: @variable; } The code above compiles into .margin-style{ margin-left: 2px + 5; } Rather than margin-left:7px; What could be causing this issue? ...
I'm looking for assistance with a script for my website that dynamically generates a PDF after the user makes selections in one of the frames. The website uses the HTML5 tag to display the PDF file. Can anyone provide guidance on a script that can: ...