We Keep Coding

How to add multiple div element below other div on button click?

I am trying to generate a div with its contents below a particular div . On clicking add button, the same div should display below the current div.
I have a list of checkboxes generated from a loop. I have another checkbox which is outside the loop labeled as 'Other' . On clicking the 'Other' checkbox, it should display a product and volume textbox which is placed in a div. On clicking the add button, this div with the textboxes should display again below the current div. Whenever I click the add button, the div should be generated below the current div. How to do so?
What I have tried is
<div class="container">
#foreach($res as $product)
<div class="form-group row">
<div class="col-sm-6 text-left">
<label for="recipient-name{{$product->id}}" class="col-form-label">
<input type="checkbox" class="chooseProduct" id="recipient-name{{$product->id}}" name="pname[]" data-id="{{$product->id}}" value="{{$product->product}}" onchange="enableVolume(this);" >{{$product->product}}</label>
</div>
<div class="col-sm-6">
<label for="volume{{$product->id}}"> <input type="number" id="volume{{$product->id}}" class="form-control" name="volume[]" placeholder="Volume" min="0" step="0.01" disabled> </label>
</div>
</div>
#endforeach
<div class="form-group row">
<div class="col-sm-6 text-left">
<label for="recipient-name_o" class="col-form-label">
<input type="checkbox" class="chooseProduct" id="recipient-name_o" name="other_product" data-id="o_id" value="" onchange="otherOption(this);" >Other</label>
</div>
<div class="col-sm-6">
<!--<label for="volume_o"> <input type="number" id="volume_o" class="form-control" name="volumeo_id" placeholder="Volume" min="0" step="0.01" disabled> </label>
--> </div>
</div>
<div class="form-group row" id="otherCheck">
<div class="col-sm-6 text-left">
<label for="text-o" class="col-form-label">
<input type="text" class="chooseProduct form-control" id="text-o" name="text-o" data-id="text-o" placeholder="Product Name" value="" ></label>
</div>
<div class="col-sm-6">
<label for="volume_o"> <input type="number" id="volumetext-o" class="form-control" name="volumeo_id" placeholder="Volume" min="0" step="0.01"> </label>
</div>
<button class='btn btn-primary' id='add_btn' onclick="addDiv();" >Add</button>
</div>
#if(count($pdf_data)>0)
<div class="form-group row">
<div class="col-sm-6 text-left">
<label for="prescription" class="col-form-label">
<input type="checkbox" class="chooseProduct" id="prescription" name="prescription" data-id="prescription" value='Agronomist Prescription' onchange="enableVolume(this);" >Most Recent Agronomist Prescription</label>
</div>
<div class="col-sm-6">
<label for="volume_pres"> <input type="number" id="volumeprescription" class="form-control" name="volume_pres" placeholder="Volume" min="0" step="0.01" disabled> </label>
</div>
</div>
<div id='append'></div>
#endif
</div>
My output
Expected Output should generate textbox below current div . On clicking add button again, another two textboxes should generate again, and so on. How to do so?

Angular- How to show an input field based on multiple select option?

I wish to show the checkin and checkout input field based on multiple select days option. For example,
select the Monday and Tuesday will show the two checkin and checkout input field let users to fill the time range for selected days.
Here is my code.
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label>Active Days</label>
<ng-select [items]="days" name="days"
bindLabel="id"
autofocus
loadingText="Loading ..."
[multiple]=true
bindValue="id"
placeholder="Select Active Days"
[(ngModel)]="attendanceProfile.days">
</ng-select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Check In Time</label>
<input autocomplete="off" atp-time-picker type="text" class="form-control"
name="checkInTime"
id="checkInTime" [(ngModel)]="attendanceProfile.checkInTime.InTime"
placeholder="Select CheckIn Time"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Check Out Time</label>
<input autocomplete="off" atp-time-picker type="text" class="form-control"
name="checkOutTime"
id="checkOutTime" [(ngModel)]="attendanceProfile.checkOutTime"
placeholder="Select CheckOut Time"/>
</div>
</div>
</div>

If i really understand you need to show input fields only when somedays are selected, for this you need just to use ngIf condition like :
*ngIf="attendanceProfile?.days?.length"
Example :
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label>Active Days</label>
<ng-select [items]="days" name="days"
bindLabel="id"
autofocus
loadingText="Loading ..."
[multiple]=true
bindValue="id"
placeholder="Select Active Days"
[(ngModel)]="attendanceProfile.days">
</ng-select>
</div>
</div>
</div>
<div *ngIf="attendanceProfile?.days?.length" class="row">
<div class="col-md-6">
<div class="form-group">
<label>Check In Time</label>
<input autocomplete="off" atp-time-picker type="text" class="form-control"
name="checkInTime"
id="checkInTime" [(ngModel)]="attendanceProfile.checkInTime.InTime"
placeholder="Select CheckIn Time"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Check Out Time</label>
<input autocomplete="off" atp-time-picker type="text" class="form-control"
name="checkOutTime"
id="checkOutTime" [(ngModel)]="attendanceProfile.checkOutTime"
placeholder="Select CheckOut Time"/>
</div>
</div>
</div>

How to display value in nearby input text box

I have got two input type textboxes
<div class="col-sm-3">
<div class="input-group">
<span class="input-group-addon icon_change"><i class="fa"></i></span>
<input type="text" class="form-control locur" name="locale[]" id="locale" placeholder="Enter the value" maxlength="10" value="" />
</div>
</div>
<div class="col-sm-3" id="usr" class="usr">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-usr"></i></span>
<input type="text" class="form-control usr" name="ustate[]" id="ustate" placeholder="Enter the rate" maxlength="10" value="" />
</div>
</div>
When I enter values in one text box ,the jquery script I prepared calculates with the vlaues and result should be shown in name="ustate[]" text box
$('.locur').live('change',function(){
var local_id = $("#curr_id").val();
var amt = $(this).val();
var convertedcost = convert_amt(amt,local_id);
$(this).find('.usr input[type="text"]').val(convertedcost);
//$(this).closest('usr').find('input[type="text"]').val(convertedcost);
});
I have tried above script,but it didn't work.
Note: There will be multiple set of these two text boxes as its looped throught a PHP script.
Any solutions ?

I'd suggest to wrap each of these sets with a div with a class say wrap, like this:
<div class="wrap">
<div class="col-sm-3">
<div class="input-group">
<span class="input-group-addon icon_change"><i class="fa"></i></span>
<input type="text" class="form-control locur" name="locale[]" id="locale" placeholder="Enter the value" maxlength="10" value="" />
</div>
</div>
<div class="col-sm-3" id="usr" class="usr">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-usr"></i></span>
<input type="text" class="form-control usr" name="ustate[]" id="ustate" placeholder="Enter the rate" maxlength="10" value="" />
</div>
</div>
</div>
then:
$(this).parents(".wrap").first().find("#ustate")
without wrapping:
$(this).parents(".col-sm-3").first().next().find("#ustate")

add a 'newclass' in the top most div class that will also work.
<div class="col-sm-3 newclass">
<div class="input-group">
<span class="input-group-addon icon_change"><i class="fa"></i></span>
<input type="text" class="form-control locur" name="locale[]" id="locale" placeholder="Enter the value" maxlength="10" value="" />
</div>
</div>
<div class="col-sm-3" id="usr" class="usr">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-usr"></i></span>
<input type="text" class="form-control usr" name="ustate[]" id="ustate"
placeholder="Enter the rate" maxlength="10" value="" />
</div>
</div>
then use :
$(this).parents(".newclass").first().next().find("#ustate");
its better to use a different class name than a bootstrap class name.

JavaScript Event Listeners interacting with hidden DOM Elements

I'm creating a travel reimbursement form for work. We have 4 separate types of travel, so my plan was to have a button for each type, and when you click on the button the correct form appears within it's own <section> element. I'm using Bootstrap 4, and I have each form on my index.html file with a class of "d-none" so that none display on load.
In the mileage section of the form, I have a Font-Awesome plus and minus sign to add another row or delete a row. The problem I'm running in to is that my event listeners work fine with the first form listed in index.html. But it doesn't work at all on the second form.
Each form has a class of ".mileage-form". I know that you can't have separate HTML elements with the same ID, but I thought classes were ok. I know I can fix this issue by having the HTML rendered with JavaScript when the correct form button is clicked, instead of just unhiding the html, but I'm trying to understand WHY what I'm trying doesn't work.
The index.html looks as follows:
<!----------------------------- ITINERANT TRAVEL ----------------------------->
<section id="itinerant" class="d-none">
<form class="mileage-form">
<div class="form-group form-row justify-content-center" id="row-1">
<div class="col-sm-2 col-md-1">
<label for="date-1">Date</label>
<input type="date" id="date-1" class="form-control">
</div>
<div class="col-sm-3 col-md-3">
<label for="origin-1">Origin Address</label>
<input type="text" class="form-control" id="origin-1" placeholder="Street Address, City, State, Zip">
</div>
<div class="col-sm-3 col-md-3">
<label for="destination-1">Destination Address</label>
<input type="text" class="form-control" id="destination-1" placeholder="Street Address, City, State, Zip">
</div>
<div class="col-sm-2 col-md-1">
<label for="personal-1">Personal Miles</label>
<input type="text" class="form-control" id="personal-1" placeholder="0">
</div>
<div class="col-sm-2 col-md-1">
<label for="calculated-1">Calculated Miles</label>
<input type="text" class="form-control" id="calculated-1" placeholder="0" value="" disabled>
</div>
</div>
</form>
<div class="form-group form-row justify-content-center">
</i>
</i>
</div>
<div class="form-group form-row justify-content-center">
<button type="button" class="btn btn-outline-success" id="calculate-mileage">Calculate Mileage</button>
<button type="button" class="btn btn-outline-danger" id="clear-all">Clear All</button>
</div>
</section>
<!-------------------- Single Day Travel ----------------------->
<section id="single-day" class="d-none">
<form class="mileage-form">
<div class="form-group form-row justify-content-center" id="row-101">
<div class="col-sm-2 col-md-1">
<label for="date-101">Date</label>
<input type="date" id="date-101" class="form-control">
</div>
<div class="col-sm-3 col-md-3">
<label for="origin-101">Origin Address</label>
<input type="text" class="form-control" id="origin-101" placeholder="Street Address, City, State, Zip">
</div>
<div class="col-sm-3 col-md-3">
<label for="destination-101">Destination Address</label>
<input type="text" class="form-control" id="destination-101" placeholder="Street Address, City, State, Zip">
</div>
<div class="col-sm-2 col-md-1">
<label for="personal-101">Personal Miles</label>
<input type="text" class="form-control" id="personal-101" placeholder="0">
</div>
<div class="col-sm-2 col-md-1">
<label for="calculated-101">Calculated Miles</label>
<input type="text" class="form-control" id="calculated-101" placeholder="0" value="" disabled>
</div>
</div>
</form>
<div class="form-group form-row justify-content-center">
</i>
</i>
</div>
</section>
And my event listeners look like this:
document.querySelector('.add-row').addEventListener('click', mileage.addRow);
document.querySelector('.delete-row').addEventListener('click', mileage.deleteRow);
The functions to add and delete a row are in a Mileage Class, but I don't think there is a problem there, because they do function properly with the "Itinerant" section. And if I comment the "Itinerant" section out, they work fine with the "Single Day" section. But like I said, if both sections are uncommented, and just hidden, they only work with the Itinerant section. If you want to see that code though, I have it all on github, and they would be in the mileage.js file.
I would greatly appreciate any explanation on what I did wrong!

use
querySelectorAll(".add-row").forEach(function(item){ item.addEventListener .. etc }):
to target all of the elements

Enable form validation/required if fieldset is not disabled

I have a booking form, which requires validation. Some of the fields are enabled/disabled depending on previous options chosen. My problem is that I am restricted from submitting the form with the fields disabled as it waits for "valid" input data from the empty fields.
Is there a way which I can enable/disable required and data validation for these fields only if the fieldset is enabled?
EDIT
Here is the code I'm currently working with. The fieldset is enabled/disabled according to the selected radio button. I want the fields within the fieldset to be validated if the radio button is selected and the fields are enabled. Right now, if I try to submit the form with the fieldset disabled and validation/required existing on the fields, I am not able to submit the form due to required fields not filled/fields validation fails due to fields being empty.
<div class="col-sm-2">
<div class="form-check">
<label class="radio-inline">
<input type="radio" name="oneRetOpt" id="returntrf" onclick="enableReturn()">
Return
</label>
</div>
</div>
<fieldset id="returnfields" disabled>
<div class="row" style="padding-bottom: 5px">
<div class="col-sm-4">
<div class="form-group">
<label for="transferTypeRet">Transfer Type:</label>
<select class="form-control" placeholder="Transfer Type" id="transferTypeRet">
<option> </option>
<option>Direct Tranfser</option>
<option>Split Transfer</option>
</select>
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="numadultsRet">Adults:</label>
<input type="number" min="0" class="form-control" placeholder="Number of Adults" id="numadultsRet" >
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="numchildRet">Children:</label>
<input type="number" min="0" class="form-control" placeholder="Number of Children (under 12 years old)" id="numchildRet" >
<p class="help-block text-danger"></p>
</div>
</div>
</div>
<div class="row" style="padding-bottom: 5px">
<div class='col-sm-6'>
<div class="form-group">
<label for="datetimeret">Date and Time:
<a href="#" data-toggle="timeTooltip"
title="Provide flight landing or departure time for airport transfers">
<i class="fa fa-info-circle"></i></a>
</label>
<div class='input-group date form_datetime' data-date-format="dd MM yyyy - HH:ii" id='datetimeret'>
<input class="form-control" type="text" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<div class="row" style="padding-bottom: 5px">
<div class="col-sm-6">
<div class="form-group">
<label for="pickupret">Pick-up Location: </label>
<input type="text" class="form-control" placeholder="Pick-up location" id="pickupret">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="dropoffret">Drop-off Location: </label>
<input type="text" class="form-control" placeholder="Drop-off location" id="dropoffret">
<p class="help-block text-danger"></p>
</div>
</div>
</div>
</fieldset>
<script type="text/javascript">
function enableReturn() {
document.getElementById("returnfields").disabled = false;
}
</script>

You can consider handling it in the submit logic of the form. See sample below. You an even bypass certain inputs from validation if you can conditionally evaluate them.
$("#myform").submit( function(event){
event.preventDefault();
var form = $("#myform");
console.log(form)
form.validate()
alert(form.valid())
form.children("#input1").remove()
form.validate()
alert(form.valid())
})
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<form id = "myform" novalidate>
<input id= "input1" required>
<input id= "input2" required>
<input type = "submit">
</form>