Develop Reference

I want to disable the selected Item from a Drop Down list for the next row's DropDown Dynamically

The HTML for the form is :
<form id="flowform" class="form" role="form" autocomplete="off">
<table id="add-flow-level" class="table table-striped table-borderless" style="width: 100%">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="col-sm-4">
<label class="required ">Min Amount</label>
<input type="text"
id="minAmount" name="minAmount" class="form-control min"
style="border-radius: 1rem; width: 183px;"
maxlength="100" required="required"
/>
<!-- onfocus = "maxAmountCheck(this.id);" -->
</div>
</td>
<td>
<div class="col-sm-4">
<label class="required ">Max Amount</label>
<input
type="text" id="maxAmount" name="maxAmount"
class="form-control max"
style="border-radius: 1rem; width: 183px;"
maxlength="100" required="required" />
<!-- onfocus = "maxAmountCheck(this.id);"/ -->
</div>
</td>
<td>
<div class="col-sm-4">
<label class="required">Approver</label>
<select class="form-control" id="approver" name="approver"
style="border-radius: 1rem; width: 183px;"
required="required" >
<!-- onfocus = "approverCheck(this.id);" -->
<option th:value="0">Select User</option>
<option th:each="usersList : ${usersList}"
th:value="${usersList.id}"
th:utext="${usersList.firstName +' '+ usersList.lastName}" />
</select>
</div>
</td>
<td>
<a href="#" id="addFlowLevelRow" class="btn btn-primary btn-label-left addFlowLevelRow" title="Add Next" style="margin-top: 18px;">
<i class="fa fa-plus" aria-hidden="true"></i>
</a>
</td>
</tr>
</tbody>
</table>
<br>
<div class="row">
<label class="control-label col-sm-5" style="margin-top: 8px;"></label>
<div class="col-sm-2">
<input type="submit" class="btn btn-primary btn-label-left"
value="Save" id="submitbtnflow" name="submitbtnflow"
style="border-radius: 1rem;">
</div>
<p id="msg" style="color: green;"></p>
</div>
</form>
js file
var countOfRows =1;
$(".addFlowLevelRow").click(function() {
var remv = "<a href='#' id='removeFlowLevelRow' class='btn btn-primary btn-label-left removeFlowLevelRow' title='Remove Row' style='margin-top: 33px;'><i class='fa fa-minus' aria-hidden='true'></i></a>";
var txt = $(this).closest("tr").find('#removeFlowLevelRow').attr('href');
if (txt == undefined && countOfRows < 5) {
var newRow = $(this).closest("tr").clone(true).appendTo("#add-flow-level").append(remv);
if(countOfRows == 4)
{
document.getElementsByClassName("addFlowLevelRow")[4].style.display = "none";
console.log("Removal of - button at row = "+countOfRows);
}
countOfRows++;
console.log("Number of row = "+countOfRows);
}
else if(countOfRows < 5){
var newRow = $(this).closest("tr").clone(true).appendTo("#add-flow-level");
if(countOfRows == 4)
{
document.getElementsByClassName("addFlowLevelRow")[4].style.display = "none";
console.log("Removal of - button at row = "+countOfRows);
}
countOfRows++;
console.log("Number of row =" +countOfRows);
}
var input = document.getElementsByClassName('max');
newRow.find('.min').val(input.value);
newRow.find('.max').val("");
newRow.find('#approver').val(0);
});
$(document).on('click', '#removeFlowLevelRow', function(e) {
console.log("view----");
$(this).closest("tr").remove();
countOfRows--;
console.log("After - Button count is = "+countOfRows);
});
$('#approver').on('change', function() {
alert("alerrt called");
var select = document.getElementById('approver');
var value = select.options[select.selectedIndex].value;
alert(value);
var index = value;
if (index > -1) {
// ${usersList}.splice(index, 1);
}
alert("ye ky tha"+select.value);
//return ${usersList};
});
I want that Super Admin to be disabled for the 2nd row and show values other than super Admin in that drop down.
Whenever the user clicks on + button it creates a clone of the row.
I have not created the new row separately but I want the new drop down to not have the value that are selected in the first drop down and this should go till 5 rows.

id's in the DOM should always be unique otherwise it can lead to strange behaviour in the page
so firstly you need to give each row's "approver" select element a separate id e.g. approver0,1,2... (or just remove the id) and instead have a common class for these elements e.g. "form-control approver"
Then in your onchange function, loop through the approver class and disable the select options that don't appear, here is some psuedo code to start working with
var a = document.getElementsByClassName("approver")
//loop through all approver select elements
for(i in a) {
if(a[i] = this) {
//do nothing if we loop to the element that has just been changed
}
else {
//if the approver select isn't the one we've just changed, loop through the options
options = a[i].childNodes
for(j in options){
if(options[j].value = this.value) {
//if the option matches the one we've just selected disable it
options[j].setAttribute("disabled")="disabled"
}
else {
//Otherwise re-enable it so we don't disable all elements by changing the selection
options[j].removeAttribute("disabled")
}
}
In this rudimentary example changing the next approver option will overwrite disabling the previous selection so you may need to also keep track of what has been selected in all other drop downs. but hopefully this gets you started

How can I get my JS code to store multiple entries from a form through adding/removing fields?

(function($) {
"use strict";
var itemTemplate = $('.input_fields_wrap'),
editArea = $('.edit-area'),
itemNumber = 1;
$(document).on('click', '.edit-area .add', function(event) {
event.preventDefault();
var item = itemTemplate.clone();
$(item).find("input[type=text]", "input[type=textarea]", "input[type=number]").removeAttr(0).val('');
item.find('[partNum]').attr('partNum', function() {
return $(this).attr('partNum') + '_' + itemNumber;
});
++itemNumber;
item.appendTo(editArea);
});
$(document).on('click', '.edit-area .rem', function(event) {
event.preventDefault();
var total_fields = itemTemplate[0].childNodes.length;
if (total_fields > 1) {
editArea.children('.input_fields_wrap').last().remove();
}
});
$(document).on('click', '.edit-area .del', function(event) {
var target = $(event.target),
row = target.closest('.input_fields_wrap');
row.remove();
});
}(jQuery));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product_titles">
<h5 class="titles">Item/Part Number</h5>
<h5 class="titles">Product Description</h5>
<h5 class="titles">Quantity</h5>
<div class="edit-area">
<button type="button" class="rem">-</button>
<button type="button" class="add">+</button>
<br><br>
</div>
</div>
<div class="input_fields_wrap">
<label for="contactFormPartNumber" class="hidden-label">{{ 'contact.form.part_number' | t }}</label>
<div class="formfield"><input type="text" id="contactFormPartNumber" name="contact[{{ 'contact.form.part_number' | t }}]" placeholder="{{ 'contact.form.part_number' | t }} *" required="required"></div>
<div class="formfield"><input type="text" name="description" placeholder="Product Description"></div>
<div class="formfield"><input type="number" id="contactQuantity" name="contact[{{ 'contact.form.quantity' | t }}]" value="0" min="0" required="required"></div>
</div>
Okay so the problem I have been facing is that every time a new field is created it lets the user type the data but doesn't store it anywhere. I think using arrays might work but I'm not quite sure how I'm supposed to integrate that in my code. Also a weird thing that happens when I create a new field using the buttons is it pushes my first field down but after that the next fields after the second one somehow sandwich between field 1 and 2. I don't quite know why that happens. Any help is appreciated!

Plus and Minus Algorithm not working (JavaScript)

I have two buttons labeled plus and minus side by side and a display box at the center. I have a fixed value box at the top (say 10). When a user clicks plus the display box becomes one while the fixed value reduced to 9 and if I click the minus button, the fixed value returns to 10 while the display value becomes 0... It continues like that until the fixed value is exhausted. The functionality should work for all my four inputs. Below is what have tried.
var minusBtn = document.querySelectorAll("#minus");
var plusBtn = document.querySelectorAll("plus");
var displayvalue = document.querySelectorAll("displayvalue");
var number = 0;
var min = 0;
var fixed = 10;
plusBtn.onclick = function() {
if (fixed > number) {
number = number++;
numberPlace.innerText = number; /// Display the value in place of the number
}
if (number == max) {
} else {
}
}
<body>
<div class="Fixed_number">10</div>
<form>
<label for=""> One
<div id="">
<button id="plus">+</button>
<span id="displayvalue">0</span>
<button id="minus">-</button>
</div>
</label>
</form>
<form>
<label for=""> Two
<div id="">
<button id="plus">+</button>
<span id="displayvalue">0</span>
<button id="minus">-</button>
</div>
</label>
</form>
<form>
<label for=""> Three
<div id="">
<button id="plus">+</button>
<span id="displayvalue">0</span>
<button id="minus">-</button>
</div>
</label>
</form>
<form>
<label for=""> Four
<div id="">
<button id="plus">+</button>
<span id="displayvalue">0</span>
<button id="minus">-</button>
</div>
</label>
</form>
<link rel="stylesheet" href="app.js">
</body>

If you must do it like this than change JS to
var total = document.querySelector(".Fixed_number");
var minusBtn = document.querySelectorAll("#minus");
var plusBtn = document.querySelectorAll("#plus");
plusBtn.forEach(function(item){
item.onclick = function(){
if( parseInt(total.innerText) > 0 ){
item.nextElementSibling.innerText = parseInt(item.nextElementSibling.innerText) + 1;
total.innerText = parseInt(total.innerText) - 1;
}
};
});
minusBtn.forEach(function(item){
item.onclick = function(){
if( parseInt(item.previousElementSibling.innerText) > 0 ){
item.previousElementSibling.innerText = parseInt(item.previousElementSibling.innerText) - 1;
total.innerText = parseInt(total.innerText) + 1;
}
};
});
And you must put type="button" for all buttons or else it will submit the form and reload the page.

How to add 1 to a value in an input field with javascript on click?

I have a shopping cart and I want to implement an update quantities per item.. Let me show you that code maybe it will be easier to explain.
HTML:
<div class="custom-quantity-input">
<input type="text" name="quantity" class="" value="<?php echo $items['qty']; ?>">
<i class="fa fa-angle-up"></i>
<i class="fa fa-angle-down"></i>
</div>
I want that when user click on the link add-one to increase the amount on the input field and when they click #decrease to reduce by one the amount on the input field just visually no AJAX or anything.
I don't know much of JavaScript that's why I seek your help.

$(function(){
$(".quantity-input-up").click(function(){
var inpt = $(this).parents(".custom-quantity-input").find("[name=quantity]");
var val = parseInt(inpt.val());
if ( val < 0 ) inpt.val(val=0);
inpt.val(val+1);
});
$(".quantity-input-down").click(function(){
var inpt = $(this).parents(".custom-quantity-input").find("[name=quantity]");
var val = parseInt(inpt.val());
if ( val < 0 ) inpt.val(val=0);
if ( val == 0 ) return;
inpt.val(val-1);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-quantity-input">
<input type="number" min="0" name="quantity" class="" value="5">
<i class="fa fa-angle-up">+</i>
<i class="fa fa-angle-down">-</i>
</div>
<div class="custom-quantity-input">
<input type="number" min="0" name="quantity" class="" value="9">
<i class="fa fa-angle-up">+</i>
<i class="fa fa-angle-down">-</i>
</div>
<div class="custom-quantity-input">
<input type="number" min="0" name="quantity" class="" value="200">
<i class="fa fa-angle-up">+</i>
<i class="fa fa-angle-down">-</i>
</div>

I hope this helps:
$( "#more" ).click(function() {
var qtt = parseInt($('#quantity').val(), 10);
$('#quantity').val(qtt+1);
});
$( "#less" ).click(function() {
var qtt = parseInt($('#quantity').val(), 10);
if (qtt > 0) { //does not allow negative values
$('#quantity').val(qtt-1);
}
});
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<input type="text" id="quantity" value="5">
<button id="more" type="button">+</button>
<button id="less" type="button">-</button>
Do not forget to include the jQuery project.

Here's a nicer and more portable solution that accounts for multiple inputs on a page:
jQuery(function($) {
$(".quantity-btn").on("click", function(e) {
e.preventDefault(); // Don't scroll top.
var $inp = $(this).closest("div").find("input"), // Get input
isUp = $(this).is(".quantity-input-up"), // Is up clicked? (Boolean)
currVal = parseInt($inp.val(), 10); // Get curr val
$inp.val(Math.max(0, currVal += isUp ? 1 : -1)); // Assign new val
});
// Other DOM ready code here
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-quantity-input">
<input type="text" name="quantity" class="" value="0">
▲
▼
</div>
<div class="custom-quantity-input">
<input type="text" name="quantity" class="" value="2">
▲
▼
</div>
the event.preventDefault() is just to make sure your browser does not scroll to top on anchor click.

Quick way:
function initCartCounter(input, upBtn, downBtn) {
upBtn.onclick = () => input.value++;
downBtn.onclick = () => input.value--;
}
//No matter which way you get these elements
initCartCounter(
document.getElementById('val'),
document.links[0],
document.links[1]
);
<input id="val" type="number" value="0"/>
Add
<a href="javascript:;" >Sub</a>
A bit cleaner and scalable:
!function() {
document.querySelectorAll('.cart')
.forEach(cart => {
let input = cart.querySelector('.cart-number');
cart.querySelector('.cart-number-inc')
.addEventListener('click', () => input.innerText = (input.innerText|0)+1);
cart.querySelector('.cart-number-dec')
.addEventListener('click', () => input.innerText = (input.innerText|0)-1);
})
}();
.pointer {cursor: pointer;}
<div class="cart">
<span class="cart-number">0</span>
<span class="cart-number-inc pointer">Add</span>
<span class="cart-number-dec pointer">Dec</span>
</div>
Best way, imo, is to use native input[type=number]:
<input type="number" value="0"/>

After Jquery fadein/out animate an/some errors, buttons can't be clicked

I have a form that user can select a/some year form select-options list than add these to next select-list.
To achieve it, I've create 2 select-option and four buttons to add or remove.
The part to insert and remove are achieved but the problem appear when user click add button but there is/arenn't options selected.
The error-message is successful appeared with add jquery animate-fadein/out.
But when error-message have appeared, the button isn't accessible/cann't clicked.
Below is the HTML, and js.
HTML
<div id="segitiga" class="sgtg1" style="background-image: url('picture/left_triangle.png'); display: none"></div>
<div id="err_msg_border" class="err_msg_border1" style="display: none"></div>
<div id="err_msg" class="err_msg1" style="display: none;">Pilih satu atau lebih tahun untuk dimasukkan ke daftar sebelah kanan</div>
<select id="list_tahun" style="width: 80px; margin-right: 5px" multiple="multiple" size="22"></select>
<input type="button" value="Add > &gt" class="btn_tahun" id="A" >
<input type="button" value="Add All > &gt" class="btn_tahun" id="AA">
<input type="button" value="< &lt Remove" class="btn_tahun" id="R" disabled="disabled" >
<input type="button" value=" < &lt Remove All" class="btn_tahun" id="RA" disabled="disabled">
<div id="segitiga" class="sgtg2" style="background-image: url('picture/right_triangle.png');display: none"></div>
<div id="err_msg_border" class="err_msg_border2" style="display:none"></div>
<div id="err_msg" class="err_msg2" style="display: none">Pilih satu atau lebih tahun yang akan dihapus</div>
Javascript
$(document).ready(function() {
a = document.getElementById('list_tahun');
b = document.getElementById('list_tahun_pilihan');
$("#A").click(function() {
count = 0;
count2 = 0;
for (var i = 0; i < a.options.length; i++) {
if (a.options[i].selected) {
option = document.createElement("option");
option.text = a.options[i].text;
option.value = a.options[i].value;
b.add(option);
a.options[i].selected = false;
a.options[i].disabled = true;
count++;
}
}
if (count < 1) {
$(".sgtg1").fadeIn();
$(".err_msg_border1").fadeIn();
$(".err_msg1").fadeIn();
} else if (count > 0) {
$(".sgtg1").fadeOut();
$(".err_msg_border1").fadeOut();
$(".err_msg1").fadeOut();
document.getElementById('R').disabled = false;
document.getElementById('RA').disabled = false;
}
for (var i = 0; i < a.options.length; i++) {
if (a.options[i].disabled) {
count2++;
}
}
if (count2 === a.options.length) {
document.getElementById('A').disabled = true;
document.getElementById('AA').disabled = true;
} else {
document.getElementById('A').disabled = false;
}
});
....
How I can set up the focus again to the buttons ?
-Thanks-

Your html is invalid.
First Change this:
<input type="button" value="Add>>" class="btn_tahun" id="A" >
To:
<input type="button" value="Add>&gt" class="btn_tahun" id="A" >
Text like < or > should be written in code like this:
< ==> <
> ==> >

After I inspect element with firefox, the height of area of error message -class="err_msg1" is too height and it's covered the buttons. So, when I want to click the button, the cursor will appear into class="err_msg1".
My advice, be crefully about specify each height-width of element so, when you want some of element runs well, don't let their layer are stacked.