We Keep Coding

add and delete divs created in JS

So I got this working almost perfectly but for some reason deleteInput() won't delete 2 div's in a row and I can not figure it out. The function still works but it won't delete. can someone explain why this is?
https://codepen.io/kScheid/pen/pLYXwE?editors=1010
HTML:
<div id="parent" class="first-div">
<label for="email">Email</label><input type="email" id="mail" name="usermail"> <div class="line-left shrinkM-underline"></div>
<div id="child" class="showE flex-it">
<div>
<input type="email"><div class="line-left shrinkM-underline"></div>
</div>
<span type="button" value="Remove Element" onClick="removeElement('parent','child');" class="remove"> <strong>Remove</strong></span>
</div>
<input onclick="addElement('parent', 'child');" class="input-button" type="button" value="+Add another email">
</div>
Javascript:
var counter = 1;
var limit = 5;
var newdiv = document.createElement('div');
function addInput(divName) {
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
} else {
newdiv = document.createElement('div');
newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
function deleteInput() {
for (var x = 0; x < counter; x++){
newdiv.removeChild(newdiv.childNodes[0]);
}
counter--;
}
Base format before JS
Added another Div w/JS

This may solve your problem if I understood what you are trying to do correctly. I've added an email class to your divs to remove the emails more easily.
var counter = 1;
var limit = 5;
function addInput(divName) {
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
} else {
var newdiv = document.createElement('div');
newdiv.className = "email"
newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
function deleteInput(divName) {
var emails = document.getElementsByClassName("email");
if (emails.length) {
document.getElementById(divName).removeChild(emails[emails.length - 1]);
counter--;
}
}
<div id="parent" class="first-div">
<label for="email">Email</label><input type="email" id="mail" name="usermail">
<div class="line-left shrinkM-underline"></div>
<div id="child" class="showE flex-it">
<div>
<input type="email">
<div class="line-left shrinkM-underline"></div>
</div>
<span type="button" value="Remove Element" onClick="deleteInput('parent','child');" class="remove"> <strong>Remove</strong></span>
</div>
<input onclick="addInput('parent', 'child');" class="input-button" type="button" value="+Add another email">
</div>

Increment and Decrement price value on Change

i'm trying to do an price counter synchronizing with increment and decrement buttons, but the price is not changing when i click one of the buttons (+/-) this is not working, how can i solve this issue? Thanks!!!
$('#plus').click(function add() {
var $qtde = $("#quantity");
var a = $qtde.val();
a++;
$("#minus").attr("disabled", !a);
$qtde.val(a);
});
$("#minus").attr("disabled", !$("#quantity").val());
$('#minus').click(function minust() {
var $qtde = $("#quantity");
var b = $qtde.val();
if (b >= 1) {
b--;
$qtde.val(b);
}
else {
$("#minus").attr("disabled", true);
}
});
/* On change */
$(document).ready(function()
{
function updatePrice()
{
var price = parseFloat($("#quantity").val());
var total = (price + 1) * 1.05;
var total = total.toFixed(2);
$("#total-price").val(total);
}
$(document).on("change, keyup, focus", "#quantity", updatePrice);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="-" id="minus" />
<input type="text" id="quantity" value="" name="quantity" />
<input type="button" value="+" id="plus" />
<br />
<input id="total-price" readonly="readonly" value=""/>

If you change your binding to update whenever there is a click on an input, you'll get the behavior that you are expecting.
$('#plus').click(function add() {
var $qtde = $("#quantity");
var a = $qtde.val();
a++;
$("#minus").attr("disabled", !a);
$qtde.val(a);
});
$("#minus").attr("disabled", !$("#quantity").val());
$('#minus').click(function minust() {
var $qtde = $("#quantity");
var b = $qtde.val();
if (b >= 1) {
b--;
$qtde.val(b);
} else {
$("#minus").attr("disabled", true);
}
});
/* On change */
$(document).ready(function() {
function updatePrice() {
var price = parseFloat($("#quantity").val());
var total = (price + 1) * 1.05;
var total = total.toFixed(2);
$("#total-price").val(total);
}
// On the click of an input, update the price
$(document).on("click", "input", updatePrice);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="-" id="minus" />
<input type="text" id="quantity" value="" name="quantity" />
<input type="button" value="+" id="plus" />
<br />
<input id="total-price" readonly="readonly" value="" />

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="sp-quantity">
<div class="container" style=" font-size:14px; ">
<div class="sp-input">
<input type="text" class="quantity-input" value="1">
<div class="button" style="cursor: pointer;">
+
</div>
<div class="button" style="cursor: pointer;">
-
</div>
</div>
<p>custom filed</p>
<div class="sp-input">
<input type="text" class="quantity-input-db" value="1.8" step="1.8">
<div class="button" style="cursor: pointer;">
+
</div>
<div class="button" style="cursor: pointer;">
-
</div>
</div>
</div>
</div>
<script type="text/javascript">
// debugger;
$(document).ready(function () {
$(".button").on("click", function() {
var $db_value = $('.db_value').val();
var $quantity = $('.quantity_input').val();
var db_valu_fix = 1.8;
var $button = $(this),
$input = $button.closest('.sp-quantity').find("input.quantity-input");
var oldValue_q = $input.val();
var $db_value = $button.closest('.sp-quantity').find("input.quantity-input-db");
var oldValue_db = $db_value.val();
console.log(oldValue_db);
if ($.trim($button.text()) == "+") {
newVal = parseFloat(oldValue_q) + 1;
newdbVal = parseFloat(oldValue_db) + 1;
//newdbVal.toFixed(2);
}
else {
if (oldValue_q > 0) {
newVal = parseFloat(oldValue_q) - 1;
newdbVal = parseFloat(oldValue_db) - 1;
newdbVal = Math.round(newdbVal * 100) / 100;
} else {
newVal = 1;
}
}
$input.val(newVal);
$db_value.val(newdbVal);
});
// $(".ddd").on("click", function(step) {
// var a=$(".quantity-input").val();
// var attr=$(".quantity-input").attr(step);
// var getValue=a/1;
// console.log(attr);
// });
});
</script>
</body>
</html>

how to call a styled JavaScript modal from another function?

I need to call a function which styles the JavaScript alerts, from another JavaScript function which outputs an alert and validation.
But after adding styled function, it doesn't either style or validate data.
function styledAlert() {
this.render = function(messageToDisplay) {
var winH = window.innerHeight;
var winW = window.innerWidth;
var divW = document.getElementById("dialogBox").offsetWidth;
var dialogBoxOverLay = document.getElementById('dialogBoxOverLay');
var dialogBox = document.getElementById('dialogBox');
dialogBoxOverLay.style.display = "block";
dialogBoxOverLay.style.height = winH + "px";
dialogBox.style.left = ((winW - divW) * 0.5) + "px";
dialogBox.style.top = "200px";
dialogBox.style.display = "block";
document.getElementById('dialogBoxBody').innerHTML = messageToDisplay;
}
this.ok = function() {
document.getElementById('dialogBoxOverLay').style.display = "none";
document.getElementById('dialogBox').style.display = "none";
}
}
function signupDataValidation() {
var password = document.forms["signupForm"]["password"].value;
var confirmPassword = document.forms["signupForm"]["confirmPassword"].value;
if (password == confirmPassword) {
return true;
} else {
var sAlert = new styledAlert();
sAlert.render("Password confirmation doesn't match Password.");
return false;
}
}
#dialogBoxOverLay {
display: none;
opacity: 0.8;
position: fixed;
top: 0px left: 0px;
width: 100%;
z-index: 10;
}
#dialogBox {
display: none;
position: fixed;
z-index: 10;
}
#dialogBox > div {
display: table;
}
<body>
<div id="dialogBoxOverLay"></div>
<div id="dialogBox">
<div>
<table>
<tr>
<td id="dialogBoxBody"></td>
</tr>
<tr>
<td id="dialogBoxButton">
<button type="button" id="OkButton" onclick="sAlert.ok()">OK</button>
</td>
</tr>
</table>
</div>
</div>
<form id="signupForm" name="signupForm" onsubmit="return signupDataValidation()">
<input id="password" name="password" type="password" required/>
<input id="confirmPassword" name="confirmPassword" type="password" required/>
<button id="submitBtn" type="submit">Sign Up</button>
</form>
</body>

I am trying to create a converter from Inches to feet but shows only decimals

As the title states i am trying to convert inches to feet but instead of displaying a decimal like 5.02 i want it to display 5'2" for example.
here is what the GUI looks like
I want the "conversion to feet" display they standard ft'inches" format.
My Code HTML
<form class="form-inline">
<div class="form-group">
<label for="width">Width:</label>
<input type="text" class="form-control" id="width" placeholder="">
</div>
<div class="form-group">
<label for="height">Height:</label>
<input type="text" class="form-control" id="height" placeholder="">
</div>
<div class="form-group">
<label for="measurement">Measurement:</label>
<select class="form-control" id="measurement" placeholder="">
<option value="1">Inches</option>
<option value="2">Feet</option>
</select>
</div>
<div class="form-group">
<input type="button" class="btn btn-info" value="Submit" onclick="myFunction()">
</div>
<div class="form-group">
<input type="button" class="btn btn-danger" value="Clear" onclick="clearFunction()">
</div>
</form>
<table class="table table-bordered table-background" id="contentTable">
<thead>
<tr>
<th>Type</th>
<th>Surface Area</th>
<th>Conversion to Inches</th>
<th>Conversion to Feet</th>
</tr>
</thead>
<tbody>
<tr>
<td id="type"></td>
<td id="area"></td>
<td id="conInch"></td>
<td id="conFeet"></td>
</tr>
</tbody>
</table>
Here is my JavaScript
function myFunction()
{
var width = document.getElementById('width').value;
var height = document.getElementById('height').value;
var measurment;
var area;
var widthFeet;
var heightFeet;
var widthInches;
var heightFeet;
var type;
if(document.getElementById('measurement').value == 1){
measurment = 1;
type = "Inches"
area = width * height;
widthFeet = width / 12;
heightFeet = height / 12;
widthInches = width;
heightInches = height;
} else if(document.getElementById('measurement').value == 2){
measurment = 2;
type = "Feet"
area = width * height;
widthInches = width * 12;
heightInches = height * 12;
widthFeet = width;
heightFeet = height;
}
document.getElementById('type').innerHTML = type;
document.getElementById('area').innerHTML = area + "(" + width + "x" + height + ")";
document.getElementById('conInch').innerHTML = widthInches + " X " + heightInches;
document.getElementById('conFeet').innerHTML = widthFeet.toFixed(2) + " X " + heightFeet.toFixed(2);
}
function clearFunction(){
document.getElementById('type').innerHTML = "";
document.getElementById('area').innerHTML = "";
document.getElementById('conInch').innerHTML = "";
document.getElementById('conFeet').innerHTML = "";
}

Assuming the input variables width and height are in inches, I think you can get the numbers you're asking for as follows:
widthFeet = Math.floor(width / 12);
widthInches = width%12;
heightFeet = Math.floor(height / 12);
heightInches = height%12;

How to add Min and Max validation in this code with alert

I want to add height and width calculator in my website which ask user to enter width and height size. but there should be a validation for minimum value like 200 and max value like 5000 for both height and width.
if the use add smaller than 200 and greater than 5000 it should alert a message to correct it.
I have developed this code but its not working like to ask seperatly
function calculate() {
var myBox1 = document.getElementById('box1').value;
var myBox2 = document.getElementById('box2').value;
if(myBox1 >= 200 && myBox2 >=200) {
var result = document.getElementById('result');
var myResult = [(myBox1 * myBox2 * 0.69)/100];
result.value = parseFloat(myResult).toFixed(2);
} else {
alert("Please enter Minimum Width and Height is greater than 200")
}
}
<script type="text/javascript">
</script>
<div style="background-color:gray; border-bottom-width:2; border-color:orange;">
<h3 class="page-header">Price Calculator </h3>
<div class="docs-data">
<form name="pricecalculator" id="pricecalculator" method="post" action="<?php echo $buy;?>"/>
<div class="input-group" style="display:table-row-group; alert">
<label class="input-group-addon" for="dataWidth">Width</label>
<input id="box1" type="text" onchange="calculate();"/>
<!-- <input type="text" class="form-control" id="dataWidth" placeholder="width"> -->
<span class="input-group-addon">cm</span>
</div>
<div class="input-group">
<label class="input-group-addon" for="dataHeight">Height</label>
<input id="box2" type="text" onchange="calculate();"/>
<!-- <input type="text" class="form-control" id="dataHeight" placeholder="height"> -->
<span class="input-group-addon">cm</span>
</div>
<div class="input-group">
<label class="input-group-addon" for="dataHeight">Total Price</label>
<input id="result" type="text" readonly="readonly" onchange="calculate();"/>
<!--<input type="text" class="form-control" id="dataHeight" placeholder="height"> -->
<span class="input-group-addon">AUD</span>
</div>
</div>
</div>

Try this:
function calculate() {
var myBox1 = document.getElementById('box1').value;
var myBox2 = document.getElementById('box2').value;
if (showAlert(myBox1, 'Width') && showAlert(myBox2, 'Height')) {
var result = document.getElementById('result');
var myResult = [(myBox1 * myBox2 * 0.69)/100];
result.value = parseFloat(myResult).toFixed(2);
}
}
function showAlert(boxValue, type) {
if(boxValue < 200) {
alert("Please enter Minimum " + type + " greater than 200");
return false;
}
return true;
}

The event change fires when input-element loses focus.
I would use the following decision:
function startValidator(){
var oldWidth = document.getElementById('box1').value;
var oldHeight = document.getElementById('box2').value;
setInterval(function(){
var newWidth = document.getElementById('box1').value;
var newHeight = document.getElementById('box2').value;
if (newWidth!=oldWidth || newHeight!=oldHeight){
calculate();
oldWidth = newWidth;
oldHeight = newHeight;
}
},400);
}