We Keep Coding

Dynamic input form not submitting

i have a dynamic form which lets you add and remove inputs. The issue is what even though it works visually, when submitting the form i wont get the values from inputs created by the JS function. If you need anything else let me know as this is about the last implementation to the website
Any ideas as to why? i leave my code below
The html:
<div class="form-container" id="form-container">
<div class="title-title">
<h3 class="recipe-pretitle">Recipe for</h3>
<form action="/recipes/create" enctype="multipart/form-data" method="POST">
<div>
<label for="title">
<input name="title" type="text" id="title" placeholder="Name of dish">
</label>
</div>
</div>
<div class="description-container">
<label class="description-label" for="description">A brief description of your dish: <br> (max 80char)</label>
<textarea name="description" type="text" id="description" cols="30" rows="5"></textarea>
</div>
<div class="directions-ingredients-container">
<div id="product-directions">
<div class="label-directions"><label for="directions">Cooking steps.</label></div>
<div class="controls-ol-container">
<div class="controls">
<i class="fa fa-sm">Add step</i>
<i class="fa fa-sm">Remove last step</i>
</div>
<div class="instruction-list-container">
<ol id="instruction-list">
</ol>
</div>
</div>
</div>
<div class="ingredients-container">
<div class="label-ingredients"><label for="Ingredients">Ingredients:</label></div>
<div class="controls-ol-container">
<div class="controls">
<i class="fa fa-sm">Add Ingredient</i>
<i class="fa fa-sm">Remove last Ingredient</i>
</div>
<div class="ingredient-list-container">
<ol id="ingredient-list">
</ol>
</div>
</div>
</div>
</div>
<div class="imageInputContainer">
<label id="image-label" for="image">Choose an image</label>
<input name="image" type="file" id="image">
</div>
<div>
<button type="submit">Upload</button>
</form>
</div>
</div>
Font end JS
var add_more_fields = document.getElementById("add_more_fields")
var remove_fields = document.getElementById("remove_fields")
var directions_container = document.getElementById('product-directions')
var instruction_list = document.getElementById('instruction-list')
add_more_fields.onclick = function () {
var node = document.createElement("li")
var newField = document.createElement('input')
newField.setAttribute('type', 'text')
newField.setAttribute('name', 'directions[]')
newField.setAttribute('placeholder', 'Add Instruction')
node.appendChild(newField)
instruction_list.appendChild(node)
}
remove_fields.onclick = function () {
var input_tags = instruction_list.getElementsByTagName('li')
if (input_tags.length > 1) {
instruction_list.removeChild(input_tags[(input_tags.length) - 1])
}
}
var add_more_fields_ingredients = document.getElementById("add_more_fields_ingredients")
var remove_fields_ingredients = document.getElementById("remove_fields_ingredients")
var ingredient_list = document.getElementById('ingredient-list')
add_more_fields_ingredients.onclick = function () {
var node = document.createElement("li")
var newField = document.createElement('input')
newField.setAttribute('type', 'text')
newField.setAttribute('name', 'Ingredients[]')
newField.setAttribute('placeholder', 'Add Ingredient')
node.appendChild(newField)
ingredient_list.appendChild(node)
}
remove_fields_ingredients.onclick = function () {
var input_tags = ingredient_list.getElementsByTagName('li')
if (input_tags.length > 1) {
ingredient_list.removeChild(input_tags[(input_tags.length) - 1])
}
}

your HTML is not valid, form element is not properly closed, move closing form tag outside button container, and form opening tag a level up
this should work, and now you probably need to modify styles and rearrange some elements, so you need to see to it that the form and HTML is valid, and adapt styles accordingly:
<div class="form-container" id="form-container">
<form action="/recipes/create" enctype="multipart/form-data" method="POST">
<div class="title-title">
<h3 class="recipe-pretitle">Recipe for</h3>
<div>
<label for="title">
<input name="title" type="text" id="title" placeholder="Name of dish">
</label>
</div>
</div>
<div class="description-container">
<label class="description-label" for="description">A brief description of your dish:
<br> (max 80char)</label>
<textarea name="description" type="text" id="description" cols="30" rows="5"></textarea>
</div>
<div class="directions-ingredients-container">
<div id="product-directions">
<div class="label-directions">
<label for="directions">Cooking steps.</label>
</div>
<div class="controls-ol-container">
<div class="controls">
<i class="fa fa-sm">Add step</i>
<i class="fa fa-sm">Remove last step</i>
</div>
<div class="instruction-list-container">
<ol id="instruction-list">
</ol>
</div>
</div>
</div>
<div class="ingredients-container">
<div class="label-ingredients">
<label for="Ingredients">Ingredients:</label>
</div>
<div class="controls-ol-container">
<div class="controls">
<i class="fa fa-sm">Add Ingredient</i>
<i class="fa fa-sm">Remove last Ingredient</i>
</div>
<div class="ingredient-list-container">
<ol id="ingredient-list">
</ol>
</div>
</div>
</div>
</div>
<div class="imageInputContainer">
<label id="image-label" for="image">Choose an image</label>
<input name="image" type="file" id="image">
</div>
<div>
<button type="submit">Upload</button>
</div>
</form>
</div>

ModifyDOM to clear text launched by a radio button

I have made a form that I can clear with a reset button. On this form, I have four radio buttons (that code is towards the top). When a button is selected, info comes up using "displayText". I want to attach an onclick handler to launch a function that deletes/closes that div when reset button is hit.
Someone suggested this but I can't get it to work.
document.getElementById("info").remove();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Infotech 550 Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
#form {
margin-top: 30px;
margin-left: 30px;
}
.infoText {
margin-left: 20px;
color: blue
}
p.padding2 {
padding-top: 1%;
margin-left: 30px;
color: indigo
}
</style>
<script>
function textToDisplay (radioValue){
var displayText = "";
if (radioValue =="1"){
displayText = "I have no use for audio products in my library"
} else if (radioValue == "2"){
displayText = "Not very interested in using Audacity for anything in my library"
} else if (radioValue == "3"){
displayText = "Interesting program but no practical application at this time"
} else if (radioValue == "4"){
displayText = "I am going to learn more, I think there are ways Audacity could be useful in my library"
} else if (radioValue == "5"){
displayText = "I am going to use Audacity in my library for a local audio history project"
}
return (displayText);
}
// modify DOM function
function modifyDOM (radioInput) {
console.log(radioInput.name + " + " + radioInput.value);
var displayText = textToDisplay(radioInput.value);
var insertionNode = document.getElementById("radioButtons");
var infoNode = document.getElementById("info");
if (infoNode === null) {
console.log("infoNode does not exist yet.");
var node = document.createElement("DIV");
// console.log(node);
node.setAttribute("id", "info");
node.className = "form-text infoText";
var textnode = document.createTextNode(displayText);
node.appendChild(textnode);
insertionNode.appendChild(node);
} else {
console.log("infoNode DOES exist.");
infoNode.innerHTML = displayText;
}
function clearResult(){
document.getElementById("info").remove();
}
}
// test how many checkboxes selected //
function checkboxesSelected (checkboxes, errorString) {
console.log("checkboxesSelected function");
// keep a count of how many checkboxes have been selected ... initially zero
// have to use var cbSelected = 0;
// 2) Good practice to have var when declaring a variable ...not doing it in our JavaScript examples to not add more complexity.
var cbSelected = 0;
// for loop: first need an index i to iterate through array of checkboxes;
// start at beginning of array of checkboxes
// i=0 means we start at beginning of array
// test if all elements of array have been tested... know if i < checkboxes.length that we have still elements to examine
// i-- means that we subtract -1 from i
for (i=0; i<checkboxes.length; i++) {
// test if current checkbox is checked ... if yes, add 1 to counter
if (checkboxes[i].checked) {
// increment counter
cbSelected += 1;
}
}
// test how many checkboxes have been selected ...
// if checkboxesSelected equal to 0, then we have not and return errorString
if (cbSelected <= 1) {
return (errorString);
} else {
return "";
}
}
// validate function that calls other functions and acculumates errorString and test if this is empty or not //
function validate (form) {
console.log("validate form");
var fail = "";
fail += checkboxesSelected(form.bed_extras, "At least TWO Audacity uses need to be selected.\n")
if (fail == "") return true
else { alert(fail); return false }
}
</script>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">AVM Game</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active" href="#" id="navbardrop" data-toggle="dropdown">
Infotech 550
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="Ex4_review.html">Open Source Tool Review</a>
<a class="dropdown-item" href="Ex4_form.html">Feedback Form</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbardrop" data-toggle="dropdown">
Interests
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Interest 1</a>
<a class="dropdown-item" href="#">Interest 2</a>
<a class="dropdown-item" href="#">Interest 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
<div>
<h1>Open-Source Project Data Collection</h1>
<h2>(Thank you for participating in our study)</h2>
</div>
<form id="form" method="post" action="mailto:stephentruddy#yahoo.com" onsubmit="return validate(this)">
<fieldset id="personal" class="form-group">
<legend>Personal Data</legend>
<div class="form-inline">
<label for="firstname" class="mr-sm-2">First Name:</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="firstname" name="firstname" placeholder="Enter First Name" required>
</div>
<div class="form-inline">
<label for="lastname" class="mr-sm-2">Last Name:</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="lastname" name="lastname" placeholder="Enter Last Name" required>
</div>
<div class="form-inline">
<label for="email" class="mr-sm-2">Email:</label>
<input type="email" class="form-control mb-2 mr-sm-2" id="email" name="email" placeholder="Enter A Valid Email" required>
</div>
<div class="form-inline">
<label for="state" class="mr-sm-2">State:</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="state" name="state" placeholder="Enter Two Letter State " pattern="[A-Z]{2}" title="State needs to be TWO CAPITAL letters"]required>
</div>
<div class="form-inline">
<label for="firstname" class="mr-sm-2">Zipcode:</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="zipcode" name="zipcode" placeholder="Enter 5 Digit Zipcode " pattern="[0-9]{5}" title="Zipcode needs to be 5 numbers"] required >
</div>
</fieldset>
<fieldset>
<legend>Questions About Audacity</legend>
<label>Rate your interest in using Audacicity in your library (1 being lowest):</label>
<div id="radioButtons" class="form-group">
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="bed_size" value="1" required onclick="modifyDOM(this)">
1</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="bed_size" value="2" required onclick="modifyDOM(this)">
2</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="bed_size" value="3" required onclick="modifyDOM(this)">
3</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="bed_size" value="4" required onclick="modifyDOM(this)">
4</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="bed_size" value="5" required onclick="modifyDOM(this)">
5</label>
</div>
</div>
<label>How would use Audacity (check at least TWO options)</label>
<div id="checkboxes" class="form-group">
<div class="form-check form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" name="bed_extras" value="oralhistory">
Oral History
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" name="bed_extras" value="multimedia">
Multimedia
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" name="bed_extras" value="dailynews">
Daily News
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" name="bed_extras" value="podcast">
Podcasts
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" name="bed_extras" value="natual world">
The Natural World
</label>
</div>
</div>
</fieldset>
<input type="submit" value="Submit" name="submit">
<input type="reset" value="Reset" name="reset" onclick="clearResult(this)">
</form>
<footer><p class="padding2">c. New World InfoTechnologies Corporation</p></footer>
</body>
</html>

You had your clearResult function inside the scope of your modifyDOM function. Move it to the global scope to call it directly from your html onclick handler.
function textToDisplay(radioValue) {
var displayText = "";
if (radioValue == "1") {
displayText = "I have no use for audio products in my library"
} else if (radioValue == "2") {
displayText = "Not very interested in using Audacity for anything in my library"
} else if (radioValue == "3") {
displayText = "Interesting program but no practical application at this time"
} else if (radioValue == "4") {
displayText = "I am going to learn more, I think there are ways Audacity could be useful in my library"
} else if (radioValue == "5") {
displayText = "I am going to use Audacity in my library for a local audio history project"
}
return (displayText);
}
// modify DOM function
function modifyDOM(radioInput) {
console.log(radioInput.name + " + " + radioInput.value);
var displayText = textToDisplay(radioInput.value);
var insertionNode = document.getElementById("radioButtons");
var infoNode = document.getElementById("info");
if (infoNode === null) {
console.log("infoNode does not exist yet.");
var node = document.createElement("div");
// console.log(node);
node.setAttribute("id", "info");
node.className = "form-text infoText";
var textnode = document.createTextNode(displayText);
node.appendChild(textnode);
insertionNode.appendChild(node);
} else {
console.log("infoNode DOES exist.");
infoNode.innerHTML = displayText;
}
}
function clearResult() {
var info = document.getElementById("info");
var infoParent = document.getElementById("radioButtons")
infoParent.removeChild(info)
}
// test how many checkboxes selected //
function checkboxesSelected(checkboxes, errorString) {
console.log("checkboxesSelected function");
// keep a count of how many checkboxes have been selected ... initially zero
// have to use var cbSelected = 0;
// 2) Good practice to have var when declaring a variable ...not doing it in our JavaScript examples to not add more complexity.
var cbSelected = 0;
// for loop: first need an index i to iterate through array of checkboxes;
// start at beginning of array of checkboxes
// i=0 means we start at beginning of array
// test if all elements of array have been tested... know if i < checkboxes.length that we have still elements to examine
// i-- means that we subtract -1 from i
for (i = 0; i < checkboxes.length; i++) {
// test if current checkbox is checked ... if yes, add 1 to counter
if (checkboxes[i].checked) {
// increment counter
cbSelected += 1;
}
}
// test how many checkboxes have been selected ...
// if checkboxesSelected equal to 0, then we have not and return errorString
if (cbSelected <= 1) {
return (errorString);
} else {
return "";
}
}
// validate function that calls other functions and acculumates errorString and test if this is empty or not //
function validate(form) {
console.log("validate form");
var fail = "";
fail += checkboxesSelected(form.bed_extras, "At least TWO Audacity uses need to be selected.\n")
if (fail == "") return true
else {
alert(fail);
return false
}
}
#form {
margin-top: 30px;
margin-left: 30px;
}
.infoText {
margin-left: 20px;
color: blue
}
p.padding2 {
padding-top: 1%;
margin-left: 30px;
color: indigo
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Infotech 550 Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">AVM Game</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active" href="#" id="navbardrop" data-toggle="dropdown">
Infotech 550
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="Ex4_review.html">Open Source Tool Review</a>
<a class="dropdown-item" href="Ex4_form.html">Feedback Form</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbardrop" data-toggle="dropdown">
Interests
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Interest 1</a>
<a class="dropdown-item" href="#">Interest 2</a>
<a class="dropdown-item" href="#">Interest 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
<div>
<h1>Open-Source Project Data Collection</h1>
<h2>(Thank you for participating in our study)</h2>
</div>
<form id="form" method="post" action="mailto:stephentruddy#yahoo.com" onsubmit="return validate(this)">
<fieldset id="personal" class="form-group">
<legend>Personal Data</legend>
<div class="form-inline">
<label for="firstname" class="mr-sm-2">First Name:</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="firstname" name="firstname" placeholder="Enter First Name" required>
</div>
<div class="form-inline">
<label for="lastname" class="mr-sm-2">Last Name:</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="lastname" name="lastname" placeholder="Enter Last Name" required>
</div>
<div class="form-inline">
<label for="email" class="mr-sm-2">Email:</label>
<input type="email" class="form-control mb-2 mr-sm-2" id="email" name="email" placeholder="Enter A Valid Email" required>
</div>
<div class="form-inline">
<label for="state" class="mr-sm-2">State:</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="state" name="state" placeholder="Enter Two Letter State " pattern="[A-Z]{2}" title="State needs to be TWO CAPITAL letters" ]required>
</div>
<div class="form-inline">
<label for="firstname" class="mr-sm-2">Zipcode:</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="zipcode" name="zipcode" placeholder="Enter 5 Digit Zipcode " pattern="[0-9]{5}" title="Zipcode needs to be 5 numbers" ] required>
</div>
</fieldset>
<fieldset>
<legend>Questions About Audacity</legend>
<label>Rate your interest in using Audacicity in your library (1 being lowest):</label>
<div id="radioButtons" class="form-group">
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="bed_size" value="1" required onclick="modifyDOM(this)">
1</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="bed_size" value="2" required onclick="modifyDOM(this)">
2</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="bed_size" value="3" required onclick="modifyDOM(this)">
3</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="bed_size" value="4" required onclick="modifyDOM(this)">
4</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="bed_size" value="5" required onclick="modifyDOM(this)">
5</label>
</div>
</div>
<label>How would use Audacity (check at least TWO options)</label>
<div id="checkboxes" class="form-group">
<div class="form-check form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" name="bed_extras" value="oralhistory">
Oral History
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" name="bed_extras" value="multimedia">
Multimedia
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" name="bed_extras" value="dailynews">
Daily News
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" name="bed_extras" value="podcast">
Podcasts
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" name="bed_extras" value="natual world">
The Natural World
</label>
</div>
</div>
</fieldset>
<input type="submit" value="Submit" name="submit">
<input type="reset" value="Reset" name="reset" onclick="clearResult(this)">
</form>
<footer>
<p class="padding2">c. New World InfoTechnologies Corporation</p>
</footer>
</body>
</html>

how to get radio input value that the selector gotten using find() function

I try to get value from children element that each child (item) has input fields with the same name. To do that, I used each() function. I get problem when retrieving value from radio input, I get the value from radio input that shouldn't. Here the code
<div class="accordion" id="menu-ui-sortable" role="tablist" aria-multiselectable="true">
<div class="panel menu-item">
<a class="panel-heading collapsed" role="tab" id="heading-menu-item-1" data-toggle="collapse" data-parent="#menu-ui-sortable" href="#menu-item-settings-1" aria-expanded="false" aria-controls="menu-item-settings-1">
<h4 class="panel-title">Menu Item 1</h4>
<i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
<i class="item-type pull-right">Halaman Web</i>
</a>
<input type="hidden" name="menu_item_type" value="page"/>
<input type="hidden" name="menu_item_page_id" value="12"/>
<input type="hidden" name="menu_item_content_id" value=""/>
<input type="hidden" name="menu_item_url" value="www.example.com/page-12"/>
<div id="menu-item-settings-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-menu-item-1">
<div class="panel-body">
<label>Label Navigasi</label>
<input type="text" class="form-control" name="menu_item_title" value="label 1"/>
<label>Atribut Judul</label>
<input type="text" class="form-control" name="menu_item_attr_title" value="attr 1"/>
<p class="menu_item_target"><label><input type="checkbox" name="menu_item_target" value="1" checked=""> Buka tautan di tab baru</label></p>
<label>CSS Classes/Icon</label>
<input type="text" class="form-control" name="menu_item_classes" value="fa fa-glass"/>
<label>Letak CSS Classes/Icon</label>
<div class="radio">
<label><input type="radio" name="menu_item_classes_position" value="left" checked=""> Sebelah kiri label</label>
<label><input type="radio" name="menu_item_classes_position" value="right"> Sebelah kanan label</label>
</div>
<label class="move-button-handle">
<span>Pindahkan: </span>
Naik Satu
Turun Satu
Urutan Pertama
Urutan Terakhir
</label>
<div class="menu-item-actions submitbox">
<p class="link-to-original">Asli: <a class="a-link" href="http://wordpress.dev/new-page-page/">new page page</a></p>
<a class="item-delete danger-highlight" href="#">Hapus</a><span> | </span>
<a class="item-cancel" href="#">Cancel</a>
</div>
</div>
</div>
</div>
<div class="panel menu-item">
<a class="panel-heading collapsed" role="tab" id="heading-menu-item-2" data-toggle="collapse" data-parent="#menu-ui-sortable" href="#menu-item-settings-2" aria-expanded="false" aria-controls="menu-item-settings-2">
<h4 class="panel-title">Menu Item 2</h4>
<i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
<i class="item-type pull-right">Homepage Content</i>
</a>
<input type="hidden" name="menu_item_type" value="homepage-content"/>
<input type="hidden" name="menu_item_page_id" value=""/>
<input type="hidden" name="menu_item_content_id" value="4"/>
<input type="hidden" name="menu_item_url" value="#content-4"/>
<div id="menu-item-settings-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-menu-item-2">
<div class="panel-body">
<label>Label Navigasi</label>
<input type="text" class="form-control" name="menu_item_title" value="label 2"/>
<label>Atribut Judul</label>
<input type="text" class="form-control" name="menu_item_attr_title" value="attr 2"/>
<p class="menu_item_target"><label><input type="checkbox" name="menu_item_target" value="1"> Buka tautan di tab baru</label></p>
<label>CSS Classes/Icon</label>
<input type="text" class="form-control" name="menu_item_classes" value="fa fa-search"/>
<label>Letak CSS Classes/Icon</label>
<div class="radio">
<label><input type="radio" name="menu_item_classes_position" value="left"> Sebelah kiri label</label>
<label><input type="radio" name="menu_item_classes_position" value="right" checked=""> Sebelah kanan label</label>
</div>
<label class="move-button-handle">
<span>Pindahkan: </span>
Naik Satu
Turun Satu
Urutan Pertama
Urutan Terakhir
</label>
<div class="menu-item-actions submitbox">
<a class="item-delete danger-highlight" id="delete-2" href="#">Hapus</a><span> | </span>
<a class="item-cancel" id="cancel-2" href="#">Cancel</a>
</div>
</div>
</div>
</div>
<div class="panel menu-item">
<a class="panel-heading collapsed" role="tab" id="heading-menu-item-3" data-toggle="collapse" data-parent="#menu-ui-sortable" href="#menu-item-settings-3" aria-expanded="false" aria-controls="menu-item-settings-3">
<h4 class="panel-title">Menu Item 3</h4>
<i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
<i class="item-type pull-right">Tautan Tertentu</i>
</a>
<input type="hidden" name="menu_item_type" value="custom-link"/>
<input type="hidden" name="menu_item_page_id" value=""/>
<input type="hidden" name="menu_item_content_id" value=""/>
<div id="menu-item-settings-3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-menu-item-3">
<div class="panel-body">
<label>URL</label>
<input type="text" class="form-control" name="menu_item_url" value="www.example.com"/>
<label>Label Navigasi</label>
<input type="text" class="form-control" name="menu_item_title" value="label 3"/>
<label>Atribut Judul</label>
<input type="text" class="form-control" name="menu_item_attr_title" value="attr 3"/>
<p class="menu_item_target"><label><input type="checkbox" name="menu_item_target" value="1"> Buka tautan di tab baru</label></p>
<label>CSS Classes/Icon</label>
<input type="text" class="form-control" name="menu_item_classes" value="fa fa-files"/>
<label>Letak CSS Classes/Icon</label>
<div class="radio">
<label><input type="radio" name="menu_item_classes_position" value="left" checked=""> Sebelah kiri label</label>
<label><input type="radio" name="menu_item_classes_position" value="right"> Sebelah kanan label</label>
</div>
<label class="move-button-handle">
<span>Pindahkan: </span>
Naik Satu
Turun Satu
Urutan Pertama
Urutan Terakhir
</label>
<div class="menu-item-actions submitbox">
<a class="item-delete danger-highlight" id="delete-3" href="#">Hapus</a><span> | </span>
<a class="item-cancel" id="cancel-3" href="#">Cancel</a>
</div>
</div>
</div>
</div>
</div>
<br/>
<button id="menu-nav-action" type="submit" class="btn btn-success btn-sm">Save</button>
The js
$(document).ready(function () {
$("#menu-ui-sortable").collapse().sortable({
placeholder: "ui-sortable-placeholder",
start: function(evt, ui ){
ui.placeholder.height(ui.helper.outerHeight());
},
helper: function(evt, ui){
var $clone = $(ui).clone();
$clone .css('position','absolute');
return $clone.get(0);
}
});
$(document).on('click', '#menu-nav-action', function (evt) {
var menuNav = [];
var ctn = 0;
$("#menu-ui-sortable > div.panel.menu-item").each(function () {
var menu_item_target = $(this).find('input[name="menu_item_target"]');
var menu_item_target_ = menu_item_target.is(':checked') ? menu_item_target.val() : '0';
var menu_item_classes_position = $(this).find('input[name="menu_item_classes_position"]');
var menu_item_classes_position_ = '';
for (var i = 0, length = menu_item_classes_position.length; i < length; i++) {
if (menu_item_classes_position[i].checked) {
menu_item_classes_position_ = menu_item_classes_position[i].value;
console.log(menu_item_classes_position_);
break;
}
}
/* Using each() function not work too */
/*$(menu_item_classes_position).each(function () {
if ($(this).is(':checked')) {
menu_item_classes_position_ = $(this).val();
console.log(menu_item_classes_position_);
}
});*/
menuNav.push({
nav_label: $(this).find('input[name="menu_item_title"]').val(),
nav_title_attr: $(this).find('input[name="menu_item_attr_title"]').val(),
nav_open_new_tab: menu_item_target_,
nav_css_classes: $(this).find('input[name="menu_item_classes"]').val(),
nav_css_classes_position: menu_item_classes_position_,
nav_type: $(this).find('input[name="menu_item_type"]').val(),
nav_link: $(this).find('input[name="menu_item_url"]').val(),
nav_order: ctn});
ctn++;
});
console.log(menuNav);
alert(JSON.stringify(menuNav));
});
});
Here the output:
[
{
"nav_label":"label 1",
"nav_title_attr":"attr 1",
"nav_open_new_tab":"1",
"nav_css_classes":"fa fa-glass",
"nav_css_classes_position":"", // **this should be "left"**
"nav_type":"page",
"nav_link":"www.example.com/page-12",
"nav_order":0
},
{
"nav_label":"label 2",
"nav_title_attr":"attr 2",
"nav_open_new_tab":"0",
"nav_css_classes":"fa fa-search",
"nav_css_classes_position":"", // **this should be "right"**
"nav_type":"homepage-content",
"nav_link":"#content-4",
"nav_order":1
},
{
"nav_label":"label 3",
"nav_title_attr":"attr 3",
"nav_open_new_tab":"0",
"nav_css_classes":"fa fa-files",
"nav_css_classes_position":"left",
"nav_type":"custom-link",
"nav_link":"www.example.com",
"nav_order":2
}
]
Based the HTML, the correct value for nav_css_classes_position in each item are "left", "right", and "left".
Here the demo: jsfiddle

you are using same radio names[name="menu_item_classes_position"]for every group. Use different names for each group.
In your example, there are 3 menu items containing radio buttons wrapped in accordion. But these radio buttons are acting as a one group. that is,when you select radio button of second menu item, it will deselect radio button of first menu item.

your problem is due to this
<input type="radio" name="menu_item_classes_position" value="left" checked="checked"> Sebelah kiri label</label>
All of your radio element belongs to same group name="menu_item_classes_position" , as per the documentation of the radio input only one button of a group can be checked at a time. This is why only in menu 3 the radio button is checked. You can confirm this in your fiddle as well.
You should give each set of radio button in a menu a different name to select the correct value.

jQuery find span that has class and hide div a few parents up

I am trying to locate this span with a certain class and then work up finding closest div with another specified class and hide it. Perhaps I'm missing something?
Can anyone see why?
$(document).ready(function() {
if ($('.ty-product-detail .product-left .stock-wrap span').hasClass('ty-qty-out-of-stock')) {
$(this).closest('.ty-product-block__option').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ty-product-block ty-product-detail">
<div class="ty-product-block__wrapper clearfix">
<div class="ty-product-block__img-wrapper">
<div class="ty-product-block__img cm-reload-487" id="product_images_487_update">
<div class="ty-product-img cm-preview-wrapper">
<a id="det_img_link_48756b03bbdd708a_2203" data-ca-image-id="preview[product_images_48756b03bbdd708a]" class="cm-image-previewer cm-previewer ty-previewer" data-ca-image-width="550" data-ca-image-height="330" href="http://beanbags.ambientlounge.com/images/thumbnails/550/550/detailed/2/sakura-pink-2_te4i-3d.jpg?t=1449211457"
title="">
<img class="ty-pict " id="det_img_48756b03bbdd708a_2203" src="http://beanbags.ambientlounge.com/images/thumbnails/280/280/detailed/2/sakura-pink-2_te4i-3d.jpg?t=1449387170" alt="" title="" data-cloudzoom="zoomImage: "http://beanbags.ambientlounge.com/images/thumbnails/550/550/detailed/2/sakura-pink-2_te4i-3d.jpg?t=1449211457""
style="-webkit-user-select: none;"><span class="ty-previewer__icon hidden-phone"></span>
</a>
<a id="det_img_link_48756b03bbdd708a_1806" data-ca-image-id="preview[product_images_48756b03bbdd708a]" class="cm-image-previewer hidden cm-previewer ty-previewer" data-ca-image-width="400" data-ca-image-height="271" href="http://beanbags.ambientlounge.com/images/thumbnails/400/400/detailed/1/dims-zen.jpg?t=1440742425"
title="">
<img class="ty-pict " id="det_img_48756b03bbdd708a_1806" src="http://beanbags.ambientlounge.com/images/thumbnails/280/280/detailed/1/dims-zen.jpg?t=1440919130" alt="" title="" data-cloudzoom="zoomImage: "http://beanbags.ambientlounge.com/images/thumbnails/400/400/detailed/1/dims-zen.jpg?t=1440742425""><span class="ty-previewer__icon hidden-phone"></span>
</a>
</div>
<div class="ty-product-thumbnails ty-center cm-image-gallery" id="images_preview_48756b03bbdd708a" style="width: 280px;">
<a data-ca-gallery-large-id="det_img_link_48756b03bbdd708a_2203" class="cm-thumbnails-mini active ty-product-thumbnails__item">
<img class="ty-pict " id="det_img_48756b03bbdd708a_2203_mini" src="http://beanbags.ambientlounge.com/images/thumbnails/35/35/detailed/2/sakura-pink-2_te4i-3d.jpg?t=1449387170" alt="" title="">
</a>
<a data-ca-gallery-large-id="det_img_link_48756b03bbdd708a_1806" class="cm-thumbnails-mini ty-product-thumbnails__item">
<img class="ty-pict " id="det_img_48756b03bbdd708a_1806_mini" src="http://beanbags.ambientlounge.com/images/thumbnails/35/35/detailed/1/dims-zen.jpg?t=1440919130" alt="" title="">
</a>
</div>
<!-- Inline script moved to the bottom of the page -->
<!-- Inline script moved to the bottom of the page -->
<!-- Inline script moved to the bottom of the page -->
<!-- Inline script moved to the bottom of the page -->
<!--product_images_487_update-->
</div>
</div>
<div class="ty-product-block__left">
<form action="http://beanbags.ambientlounge.com/" method="post" name="product_form_487" enctype="multipart/form-data" class="cm-disable-empty-files cm-ajax cm-ajax-full-render cm-ajax-status-middle cm-processed-form">
<input type="hidden" name="result_ids" value="cart_status*,wish_list*,checkout*,account_info*">
<input type="hidden" name="redirect_url" value="index.php?dispatch=products.view&product_id=487">
<input type="hidden" name="product_data[487][product_id]" value="487">
<h1 class="ty-product-block-title">Zen Lounger - Sakura Pink</h1>
<div class="ty-product-block__sku">
<div class="ty-control-group ty-sku-item cm-reload-487" id="sku_update_487">
<input type="hidden" name="appearance[show_sku]" value="1">
<label class="ty-control-group__label" id="sku_487">CODE:</label>
<span class="ty-control-group__item" id="product_code_487">5528</span>
<!--sku_update_487-->
</div>
</div>
<hr class="clear">
<div class="product-left">
<div class="prices-container price-wrap">
<div class="ty-product-prices">
<span class="cm-reload-487" id="old_price_update_487">
<!--old_price_update_487--></span>
<div class="ty-product-block__price-actual">
<span class="cm-reload-487 ty-price-update" id="price_update_487">
<input type="hidden" name="appearance[show_price_values]" value="1">
<input type="hidden" name="appearance[show_price]" value="1">
<span class="ty-price" id="line_discounted_price_487"><span class="ty-price-num">$</span><span id="sec_discounted_price_487" class="ty-price-num">149.00</span></span>
<!--price_update_487-->
</span>
</div>
<span class="cm-reload-487" id="line_discount_update_487">
<input type="hidden" name="appearance[show_price_values]" value="1">
<input type="hidden" name="appearance[show_list_discount]" value="1">
<!--line_discount_update_487--></span>
</div>
</div>
<div class="ty-product-block__option">
<div class="cm-reload-487" id="product_options_update_487">
<input type="hidden" name="appearance[show_product_options]" value="1">
<input type="hidden" name="appearance[details_page]" value="1">
<input type="hidden" name="additional_info[info_type]" value="D">
<input type="hidden" name="additional_info[get_icon]" value="1">
<input type="hidden" name="additional_info[get_detailed]" value="1">
<input type="hidden" name="additional_info[get_additional]" value="">
<input type="hidden" name="additional_info[get_options]" value="1">
<input type="hidden" name="additional_info[get_discounts]" value="1">
<input type="hidden" name="additional_info[get_features]" value="">
<input type="hidden" name="additional_info[get_extra]" value="">
<input type="hidden" name="additional_info[get_taxed_prices]" value="1">
<input type="hidden" name="additional_info[get_for_one_product]" value="1">
<input type="hidden" name="additional_info[detailed_params]" value="1">
<input type="hidden" name="additional_info[features_display_on]" value="C">
<div class="cm-picker-product-options ty-product-options" id="opt_487">
<div class="ty-control-group ty-product-options__item product-list-field clearfix" id="opt_487_365">
<label class="ty-control-group__label ty-product-options__item-label">Option:</label>
<ul id="option_487_365_group" class="ty-product-options__elem">
<li class="hidden">
<input type="hidden" name="product_data[487][product_options][365]" value="731" id="option_487_365">
</li>
<li>
<label id="option_description_487_365_731" class="ty-product-options__box option-items cover-only">
<input type="radio" class="radio" name="product_data[487][product_options][365]" value="731" checked="checked" onclick="fn_change_options('487', '487', '365');">Cover only
</label>
</li>
<li>
<label id="option_description_487_365_732" class="ty-product-options__box option-items with-filling">
<input type="radio" class="radio" name="product_data[487][product_options][365]" value="732" onclick="fn_change_options('487', '487', '365');">
</label>
</li>
</ul>
</div>
</div>
<!-- Inline script moved to the bottom of the page -->
<!--product_options_update_487-->
</div>
</div>
<div class="ty-product-block__advanced-option">
<div class="cm-reload-487" id="advanced_options_update_487">
<!--advanced_options_update_487-->
</div>
</div>
<div class="ty-product-block__field-group">
<div class="cm-reload-487 stock-wrap" id="product_amount_update_487">
<input type="hidden" name="appearance[show_product_amount]" value="1">
<div class="ty-control-group product-list-field">
<label class="ty-control-group__label">Availability:</label>
<span class="ty-qty-out-of-stock ty-control-group__item" id="out_of_stock_info_487">Out of stock</span>
</div>
<!--product_amount_update_487-->
</div>
<div class="cm-reload-487" id="qty_update_487">
<input type="hidden" name="appearance[show_qty]" value="">
<input type="hidden" name="appearance[capture_options_vs_qty]" value="">
<input type="hidden" name="product_data[487][amount]" value="1">
<!--qty_update_487-->
</div>
<div class="ty-product-block__button">
<div class="cm-reload-487 " id="add_to_cart_update_487">
<input type="hidden" name="appearance[show_add_to_cart]" value="1">
<input type="hidden" name="appearance[show_list_buttons]" value="1">
<input type="hidden" name="appearance[but_role]" value="big">
<input type="hidden" name="appearance[quick_view]" value="">
<div class="ty-control-group">
<label for="sw_product_notify_487" class="ty-strong">
<input id="sw_product_notify_487" type="checkbox" class="checkbox cm-switch-availability cm-switch-visibility" name="product_notify" onclick="if (!this.checked) {Tygh.$.ceAjax('request', 'http://beanbags.ambientlounge.com/index.php?dispatch=products.product_notifications&enable=' + 'N&product_id=487&email=' + $('#product_notify_email_487').get(0).value, {cache: false});}">Notify me when this product is back in stock</label>
</div>
<div class="ty-control-group ty-input-append ty-product-notify-email hidden" id="product_notify_487">
<input type="hidden" name="enable" value="Y">
<input type="hidden" name="product_id" value="487">
<label id="product_notify_email_label" for="product_notify_email_487" class="cm-required cm-email hidden">Email</label>
<input type="text" name="hint_email" id="product_notify_email_487" size="20" value="Enter e-mail address" class="ty-product-notify-email__input cm-hint" title="Enter e-mail address">
<button class="ty-btn-go cm-ajax" type="submit" name="dispatch[products.product_notifications]" title="Go"><i class="ty-btn-go__icon ty-icon-right-dir"></i>
</button>
</div>
<!--add_to_cart_update_487-->
</div>
</div>
</div>
<p class="clear filled-msg cover-only">* If you don't choose to add filling you will receive the cover only.</p>
<p class="clear filled-msg filled">* Comes pre-filled with microbeads</p>
</div>
<div class="product-right">
<div class="ty-product-block__note">
<p style="text-align: center;">
<img src="http://www.beanbags.com.au/images/ambient-lounge.jpg">
</p>
</div>
</div>
</form>
<div class="clear"></div>
<!-- Inline script moved to the bottom of the page -->
<div class="ty-tabs cm-j-tabs clearfix">
<ul class="ty-tabs__list">
<li id="description" class="ty-tabs__item cm-js active"><a class="ty-tabs__a">Description</a>
</li>
<li id="product_tab_11" class="ty-tabs__item cm-js"><a class="ty-tabs__a">Colour</a>
</li>
<li id="product_tab_10" class="ty-tabs__item cm-js"><a class="ty-tabs__a">Fabric</a>
</li>
<li id="features" class="ty-tabs__item cm-js"><a class="ty-tabs__a">Features</a>
</li>
</ul>
</div>
<div class="cm-tabs-content ty-tabs__content clearfix" id="tabs_content">
<div id="content_description" class="ty-wysiwyg-content content-description" style="display: block;">
<div>
<h2>Ambient Lounge Zen Lounger - Sakura Pink</h2>
<p>
Dive onto the big pink pad and it will hug your body with all the love and warmth of a big squishy teddy bear. You will fall in love with this super-soft square cushioned bean bag becasue of the difference in fabric and tactility. Quite simply, we use
premuim open weave fabrics that make you want to hug your Zen close to your skin on a cold winter's night. The design of the Zen is just so flexible and versatile - it doesnt take up lots of space in the house but yet you can sprawl out
full body to study or sit up straight to watch the TV. The natural colour scheme means it can go just about anywhere and look good. Use it as your reliable crashmat after a long day on your feet.
</p>
<p>1 bag of 300lt is enough <u>Bean Filling</u> for the luxurious Conversion Lounger (290lt needed).</p>
</div>
</div>
<div id="content_product_tab_11" class="ty-wysiwyg-content content-product_tab_11" style="display: none;">
<div class="ty-wysiwyg-content">
<p>
Make your living room or playroom pop with this precious pink plus-size luxury lounger. Children love this friendly fresh color while adults love that it also carries a deep sense of sophistication. Our world-class designers chose this decadent pink because
of its versatility and ability to sit well in many types of interior settings.
</p>
</div>
</div>
<div id="content_product_tab_10" class="ty-wysiwyg-content content-product_tab_10" style="display: none;">
<div class="ty-wysiwyg-content">
<p>
Extremely soft and tactile on the surface and backed with TC to give it extra strength and body for hard wear and form. Super thick sofa weave to give you a lush seating experience.
</p>
<p>
40％ viscose, 60% polyester, 560g/m.
</p>
</div>
</div>
<div id="content_product_tab_9" class="ty-wysiwyg-content content-product_tab_9">
</div>
<div id="content_features" class="ty-wysiwyg-content content-features" style="display: none;">
<div class="ty-product-feature">
<span class="ty-product-feature__label">Manufacture:</span>
<div class="ty-product-feature__value">Ambient Lounge</div>
</div>
<div class="ty-product-feature">
<span class="ty-product-feature__label">Style:</span>
<div class="ty-product-feature__value">Zen Lounger</div>
</div>
<div class="ty-product-feature">
<span class="ty-product-feature__label">Type:</span>
<div class="ty-product-feature__value">Interiors</div>
</div>
</div>
<div id="content_discussion" class="ty-wysiwyg-content content-discussion">
</div>
</div>
</div>
</div>
</div>

If you have more than one span elements for this, then you can use each loop through it like below:
$('.ty-product-detail .product-left .stock-wrap span').each(function() {
if ($(this).hasClass('ty-qty-out-of-stock')) {
$(this).closest('.ty-product-block__option').hide();
}
});

Managed to work out the solution with the help of "Parixit" Answer it got me in the right direction, i cleaned up the HTML so others can see the Answer better.
$(document).ready(function() {
$('.ty-product-detail .product-left .stock-wrap span').each(function() {
if ($(this).hasClass('ty-qty-out-of-stock')) {
$('.ty-product-detail').find('.ty-product-options').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ty-product-block ty-product-detail">
<div class="product-left">
<div class="cm-picker-product-options ty-product-options" id="opt_487">
<div class="ty-control-group ty-product-options__item product-list-field clearfix" id="opt_487_365">
<label class="ty-control-group__label ty-product-options__item-label">Option:</label>
<ul id="option_487_365_group" class="ty-product-options__elem">
<li>
<label id="option_description_487_365_731" class="ty-product-options__box option-items cover-only">
<input type="radio" class="radio" name="product_data[487][product_options][365]" value="731" checked="checked" onclick="fn_change_options('487', '487', '365');">Cover only
</label>
</li>
</ul>
</div>
</div>
<div class="ty-product-block__field-group">
<div class="cm-reload-487 stock-wrap" id="product_amount_update_487">
<input type="hidden" name="appearance[show_product_amount]" value="1">
<div class="ty-control-group product-list-field">
<label class="ty-control-group__label">Availability:</label>
<span class="ty-qty-out-of-stock ty-control-group__item" id="out_of_stock_info_487">Out of stock</span>
</div>
<!--product_amount_update_487-->
</div>
</div>
</div>
</div>

Order forms field calculation

I am building a order form for buying Bitcoins via JotForm.Maybe someone could give me a head start here. My order form has a a few fields I have a field with current Bitcoin price which is retrieved with PHP via JSON. What I would like to do is when a user enters a amount of bitcoins he would like to order the field of TOTAL SUM would refresh automatically based on amount he entered like "2xcurent price". Any help is like really appreciated!
This is how it looks visually:
http://oi60.tinypic.com/2k4fgw.jpg
Part of my form code is here:
<h2 id="header_13" class="form-header">
Order form
</h2>
</div>
</li>
<li class="form-line" id="id_15">
<div id="cid_15" class="form-input-wide">
<div id="text_15" class="form-html">
<p>
<strong>
Bitcoin price USD:<?php echo $usd; ?>
</strong>
</p>
</div>
</div>
</li>
<li class="form-line" id="id_18">
<div id="cid_18" class="form-input-wide">
<div id="text_18" class="form-html">
<p>
<strong>
Total Sum :
</strong>
</p>
</div>
</div>
</li>
<li class="form-line" id="id_3">
<label class="form-label-top" id="label_3" for="input_3"> Email: </label>
<div id="cid_3" class="form-input-wide">
<input type="email" class=" form-textbox validate[Email]" id="input_3" name="q3_elPastas" size="25" value="" maxlength="38" />
</div>
</li>
<li class="form-line" id="id_9">
<label class="form-label-top" id="label_9" for="input_9"> Bitcoin amount: </label>
<div id="cid_9" class="form-input-wide">
<input type="text" class=" form-textbox validate[Numeric]" data-type="input-textbox" id="input_9" name="q9_pasirinktosValiutos9" size="25" value="" />
</div>
</li>
<li class="form-line" id="id_10">
<label class="form-label-top" id="label_10" for="input_10"> Bitcoin address: </label>
<div id="cid_10" class="form-input-wide">
<input type="text" class=" form-textbox validate[AlphaNumeric]" data-type="input-textbox" id="input_10" name="q10_bitcoinAdresas10" size="25" value="" maxlength="37" />
</div>
</li>
<li class="form-line" id="id_14">
<label class="form-label-top" id="label_14" for="input_14"> </label>
<div id="cid_14" class="form-input-wide">
<div class="form-single-column"><span class="form-checkbox-item" style="clear:left;"><input type="checkbox" class="form-checkbox" id="input_14_0" name="q14_input14[]" value="I Agree to receive newsletter" />
<label for="input_14_0">I Agree to receive news letter </label></span><span class="clearfix"></span>
</div>
</div>
</li>
<li class="form-line" id="id_12">
<div id="cid_12" class="form-input-wide">
<div style="width:100%; text-align:Left;">
<script id="jcf_custom_field" type="text/javascript" src="http://js.jotform.com/WidgetsServer.min.js"></script>
<iframe onload="widgetFrameLoaded(12)" frameborder="0" scrolling="no" class="custom-field-frame" id="customFieldFrame_12" src="" style="border:none;width:400px; height: 45px">
</iframe>
<div>
<input id="input_12" class="form-hidden widget-required form-widget" type="hidden" name="q12_clickTo" value="">
</div>
</div>
</div>
</li>
<li class="form-line" id="id_2">
<div id="cid_2" class="form-input-wide">
<div style="text-align:center" class="form-buttons-wrapper">
<button id="input_2" type="submit" class="form-submit-button">
ORDER!
</button>
</div>
</div>
</li>
<li style="display:none">
Should be Empty:
<input type="text" name="website" value="" />
</li>
</ul>

I solved this by simply using an array of objects. So for example, I am accepting registrations. So to get the total price I go about it like this:
var registrants = [];
registrants.push({ price: 30 });
registrants.push({ price: 10 });
registrants.push({ price: 20 });
var totalPrice = 0;
for(var x = 0; x < registrants.length; x++){
totalPrice += registrants[x]["price"];
}
and you would just update the price property of the corresponding registrant when appropriate.