We Keep Coding

Trouble in looping

I came to an error in my loop code, so basically my code should also find the table in Results 1, 2, 3, 4 so on.. I need it to be like, whenever i press the add button it triggers to add another table rows. I also need a code that will trigger the find button and show a result span in my code whenever I click the add button, it will duplicate new set of code for my find button.
Here is the screenshot.
And here is my code for the find button that will appear whenever i click find.
if (e.target.dataset.op === 'finding') {
$(document).ready(function () {
$('.button1').click(function () {
const input = $('#randomizer').val()
const closest = findClosest(input)
// const html = `Inches of Mercury Row: ${closest.inches}, Value: ${closest.value}`
const html = `TEST INCHES OF MERCURY TO ROW ${closest.inches} ${closest.value} L/MIN`
$('#results1').html(html)
})
})
And here is my html for that.
<tbody>
<tr>
<td>
<label></label>
<input id="randomizer" type="text6" value="0" class="randomColor" />
<label> L/MIN # </label>
<button data-op="del" title="delete row"> ✖ </button>
<button data-op="finding" class="button1">FIND</button>
</td>
</tr>
</tbody>
</table>
<!-- <p id="piduk" style="display:none;">Result: <span id="results"></span></p> -->
<p id="piduk" style="display:none; "><span id="results" class="spanColor" style="background-color:red; font-weight: bold;"></span></p>
<p id="piduk1" style="display:none;">Result: <span id="results1"></span></p>
</div>
Here is my fiddle for the whole code.
Fiddle Link here

GTM - Table - Click on a button, and get the text of another selector

I am not a developer but I am trying to get hand in hand with Google Tag Manager.
I am working for some people that they want to track a button click on a search result.
So, you'd get the 10 products, with the name, description and a Sample button.
I can track the button on GTM (that's the easy bit), but I need to assign the button click to each product name.
This is the bit of HTML that I want to work on:
<tr>
<td>
<p class="category">
Product
</p>
<a href="/sector/product/123456789"><img class="search_image" src="https://example.com/medium/123456789.jpg" alt="Name of the Product" onerror="this.src='system/images/company_logo_block.jpg'" />
</a>
</td>
<td>
<h3>Name of the product</h3>
<p>Benefits of the product explained</p>
<p>Material <b>Plastic</b></p>
<div class="button_container">
<div class="action_container">
<div class="action_trigger">
<input type="hidden" id="code_123456789" name="code" value="123456789" />
<label class="visible" for="quantity_123456789">Quantity</label><br />
<input class="search_result_quantity numeric_only" id="quantity_123456789" name="quantity" type="number" value="1"
onkeydown="return isValidInput(this, 5, event);"/>
<label for="add_to_basket_123456789">Add to basket</label>
<input class="add_sample search_result_action" id="add_to_basket_123456789" name="add_to_basket" type="submit" value="Add to basket" />
</div>
<div class="action_response">
<img src="/sector/system/images/loading.gif" alt="Loading" />
</div>
<div class="action_result">
<img src="/sector/system/images/tick.jpg" alt="Success" /><span>Added.</span>View basket
</div>
<label for="get_sample">Get a Sample</label><input class="add_sample search_result_action" name="Sample_product" type="button" value="Sample Product" onclick="window.location='http://www.samplepage.com/123456789';"/>
<div class="clearer"></div>
</div>
</div>
<br/>
<p123456789</p>
<p>
Online
| 24/09/2015
</p>
<p><strong>Price: £26.99 +VAT</strong></p>
</td>
</tr>
So, when a user clicks on the button "Sample Product", I would like to grab the name of the product, which sits on the top <tr> with the tag h3.
For each product, there is a <tr> where all the information sits
On the console, I can get the "nodes" with document.querySelectorAll ("tr td h3)[0] - or [1] or [2] according to the name of the product I want.
I now can't get a function that, onClick a Button, will return me the <h3> text of that <tr> selector. Is this even possible?
Thanks so much for your help.
George

Ok. After long hours of trial and error, I came up with a solution that works.
I'll leave it here in case it might help someone.
function() {
var els = document.querySelectorAll('[value="Sample Product"]');
for (var i = 0; i < els.length; i += 1) {
if (els[i] === {{Click Element}}) {
var elsname = document.querySelectorAll('tr td h3')[i].innerText
return elsname; }
}
return elsname;
}

Angular hide inputs in ng-repeat table rows

How would i hide input elements and replace there value to the table rows , the inputs are dynamically created with push see below code :
view
ID LIKE TO REPLACE THE INPUTS WITH THE VALUE OF INPUTS IN THE TABLE ROWS
<tr class="odd gradeX" ng-repeat="choice in vm.choices">
<td>Add</td>
<td>save</td>
<td>
<div class="form-group">
<div class="input-group">
<input type="text" placeholder="Item Name" class="form-control" ng-model="choice.item_name"/>
</div>
</div>
</td>
<td>
<div class="form-group">
<div class="input-group">
<select data-ng-options='t.value as t.label for t in vm.invoice_item_type' ng-model="choice.item_type" >
</select>
</div>
</div>
</td>
contoller
vm.choices = [];
vm.addNewChoice = function() {
var newItemNo = parseInt(vm.choices.length+1);
vm.choices.push({});
};
vm.saveChoice = function() {
var lastItem = vm.choices.length-1;
------ What to do here ------
};

Ok, the easiest way to do this would be probably something like this:
Add additional field to every choice object saying if it's saved or not
Add two <td>s for every choice, one with plain text and one with input and show/hide them depending on extra parameter' value.
Something like this:
<tr class="odd gradeX" ng-repeat="choice in vm.choices">
<td>Add</td>
<td>save</td>
<td ng-hide="choice.saved">
<div class="form-group">
<div class="input-group">
<input type="text" placeholder="Item Name" class="form-control" ng-model="choice.item_name"/>
</div>
</div>
</td>
<td ng-show="choice.saved">
<div class="form-group">
<div class="input-group">
<input type="text" placeholder="Item Name" class="form-control" ng-model="choice.item_name"/>
</div>
</div>
</td>
<!-- rest of your row goes here -->
</tr>
And in controller:
vm.choices = [];
vm.addNewChoice = function() {
var newItemNo = parseInt(vm.choices.length+1);
vm.choices.push({}); // we don't need to set `saved` property explicitly since undefined will be resolved to false
};
vm.saveChoice = function(choice) {
var lastItem = vm.choices.length-1;
choice.saved=true;
// probably some extra logic related to saving
};
Note that I've added parameter to saveChoice method - you need to know which choice to save.
Also, I think that button for adding new choice should be moved outside of the table - adding new item is not related to any existing item.

Traversing with jQuery: cycle over children

Hi all I have an html structure like this:
<tr>
<td>
<div class="sigle-sz">
<span class="label-sz">36</span> <input class="" type="tel" value="" name="">
<div class="available yes">
<i aria-hidden="true" class="availablespot"></i>
</div>
</div> <!-- /sigle-sz -->
</td>
<td>
<div class="sigle-sz">
<span class="label-sz">38</span> <input class="" type="tel" value="" name="">
<div class="available yes">
<i aria-hidden="true" class="availablespot"></i>
</div>
</div> <!-- /sigle-sz -->
</td>
<td>
<div class="sigle-sz">
<span class="label-sz">40</span> <input class="" type="tel" value="" name="">
<div class="available yes">
<i aria-hidden="true" class="availablespot"></i>
</div>
</div> <!-- /sigle-sz -->
</td>
</tr>
I created a jQuery function like this:
<script>
function pippo() {
//code here
}
$( document ).ready(function() {
$( ".sigle-sz" ).on('change', function() {
pippo();
});
});
</script>
I would, into the function "pippo()", cycle the <td> elements in the <tr> tag and save the input value in a variable.
If this is the $( ".sigle-sz" ) element, how I can do this cycle?
I put here my current code: https://jsfiddle.net/ydrunbzz/

You can use $.each() jQuery function:
var values; // define global var to use everywhere
function pippo(myClass) {
$.each(("." + myClass), function (index, value) {
values += value;
});
}

Tonnes of ways to solve this with an .each() loop. I think it's important to have a very readable loop if you are new, or else you'll lose track fast.
1) global variable
2) first make sure that the data is gathered when someone writes something in the inputs!
3) the pippo function will clear the global variable "arrSigle" (short for Array Sigle), and make sure it's only filled with the current numbers written down
$(document).ready(function () {
//1
var arrSigle= [];
//2
$( ".sigle-sz" ).find("input").on("change", function(){
pippo();
//just FYI, the "change" only fires when an input has a new value, and lose focus
// by any means. If it annoys you to have to click out of the box for pippo()
//to run, you might want to use "onkeyup" instead of "change".
//it will fire every time someone lets go of a key while inside the input
})
//3
function pippo(){
arrSigle.length = 0; //this clears the variable
$( ".sigle-sz" ).find("input").each(function(){
arrSigle.push($(this).val());
//this itterates over all the inputs and pushes them into the
//global variable.
})
//If you want some function to run right after all the
//numbers has been gathered, put it right under this comment.
}
});
We can all discuss how "efficient" this is, but considering how small your page probably is, i think it's more than justifiable to make it this simple

How to clear Input data from within JQuery Div

I have a simple form users can fill out and also add a new form to add multiple entries.
Everything works fine except when I enter data in the first set of inputs and click create new memberships it will take the data from the form and put it in the text boxes.
How can I stop that?
http://jsfiddle.net/811yohpn/2/
I have tried a couple different ways.
$('#education').find('input:text').val('');
$('#education: input').val('');
However that will clear all entries.

Call find on the newDiv, instead of all inputs within #education.
Updated fiddle
newDiv.find('input:text').val('');
var ed = 1;
function new_education() {
ed++;
var newDiv = $('#education div:first').clone();
newDiv.attr('id', ed);
var delLink = '<a class="btn btn-danger" style="text-align:right;margin-right:65px" href="javascript:deled(' + ed + ')" > Delete Education ' + ed + ' </a>';
newDiv.find('tr:first th').text('Education ' + ed);
newDiv.append(delLink);
newDiv.find('input:text').val(''); // <----------- added this
$('#education').append(newDiv);
}
function deled(eleId) {
d = document;
var ele = d.getElementById(eleId);
var parentEle = d.getElementById('education');
parentEle.removeChild(ele);
//ed--;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<legend>Education</legend>
<div id="education">
<div id="1">
<table border=3>
<tr>
<th colspan="4" style="background-color:#b0c4de;">Education 1</th>
</tr>
<tr>
<td>
<label>School Name</label>
<input type="text" name="schoolname[]" maxlength="30" size="30"/>
</td>
<td>
<label>Degree Type</label>
<input type="text" name="degreetye[]" maxlength="30" size="30"/>
</td>
<td>
<label>Degree Field</label>
<input type="text" name="degreefield[]" maxlength="30" size="30"/>
</td>
</tr>
</table>
</div>
</div>
<br/><a class="js-addNew btn btn-info" href="javascript:new_education()"> Add New Education </a>

You need to clear the inputs under the cloned element
newDiv.find('input').val('')
Demo: Fiddle
Your selectors are selecting all input elements within the #education container, that is not what you want. The newDiv variable refers to the newly created element so you can use that to find the input elements within in and then clear it