Develop Reference

show <div> with checkbox jquery

the script works and shows me the div, but only for one record, and I have 10 more records where it does nothing to select the check.
look:
It only works with the first check, but the rest is not possible, any solution?
the script
<script type="text/javascript">
function showContent() {
element = document.getElementById("content");
check = document.getElementById("check");
if (check.checked) {
element.style.display='block';
}
else {
element.style.display='none';
}
}
</script>
the view
<table class="table table-striped">
<thead>
<tr>
<td>ID</td>
<td>Nombre del Ingrediente</td>
<td>Proveedor</td>
<td>Agregar</td>
<td>Cantidad</td>
</tr>
</thead>
<tbody>
#foreach($ingredientes as $ingrediente)
<tr>
<td>{{$ingrediente->id}}</td>
<td>{{$ingrediente->nombre}}</td>
<td>{{$ingrediente->proveedor}}</td>
<td>
<label>
<input type="checkbox" name="check" id="check" value="" onchange="javascript:showContent()" />
</label>
</td>
<td>
<div class="form-group row">
<div class="col-sm-4">
<div class="dv" id="content" style="display:none;">
<input class="dvs" id="ex1" type="number" />
</div>
</div>
</div>
</td>
</tr>
#endforeach
</tbody>
</table>

The attribute id must be unique in a document. You can pass this object to the function by which you can target the relevant div element by class.
function showContent(el) {
var element = el.parentNode.parentNode.nextElementSibling.querySelector('.dv');
if (el.checked) {
element.style.display='block';
}
else {
element.style.display='none';
}
}
<table class="table table-striped">
<thead>
<tr>
<td>ID</td>
<td>Nombre del Ingrediente</td>
<td>Proveedor</td>
<td>Agregar</td>
<td>Cantidad</td>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td>mnl</td>
<td>Test.....</td>
<td>
<label>
<input type="checkbox" name="check" id="check" value="" onchange="javascript:showContent(this)" />
</label>
</td>
<td>
<div class="form-group row">
<div class="col-sm-4">
<div class="dv" style="display:none;">
<input class="dvs" type="number" />
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>222</td>
<td>xyz</td>
<td>Test..</td>
<td>
<label>
<input type="checkbox" name="check" id="check" value="" onchange="javascript:showContent(this)" />
</label>
</td>
<td>
<div class="form-group row">
<div class="col-sm-4">
<div class="dv" style="display:none;">
<input class="dvs" type="number" />
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>

the problem with your code at the moment is that you are trying to bind everything to the same ID, IDs should be unique identifiers, meaning there should be no duplication of them in your code on any given page.
You are binding the event to the first box and then subsequently, the content to first instance of the id content and check, subsequent bindings are not taken into account.
To remedy this, you must either select by class (not recommended) or instead, select by ID but dynamically generate the ID, you could do this by replacing the line
<input type="checkbox" name="check" id="check" value="" onchange="javascript:showContent()" />
with
<input type="checkbox" name="check" id="check-{{$ingrediente->id}}" value="" onchange="javascript:showContent('{{$ingrediente->id}}')" />
and again for the line <div class="dv" id="content" style="display:none;">
you can change this to
<div class="dv" id="content-{{$ingrediente->id}}" style="display:none;">
and then changing your showContent method to accept a parameter.
<script type="text/javascript">
function showContent(id) {
element = document.getElementById('content-' + id);
check = document.getElementById('check-' + id);
if (check.checked) {
element.style.display='block';
}
else {
element.style.display='none';
}
}
</script>
Good luck :)

You are using duplicate id for checkbox and div content for all row.
You should add more specific info for div's id and pass argument for showConent() function
<td>
<label>
<input type="checkbox" name="check" id="check" value="" onchange="javascript:showContent({{$ingrediente->id}})" />
</label>
</td>
<td>
<div class="form-group row">
<div class="col-sm-4">
<div class="dv" id="content-{{$ingrediente->id}}" style="display:none;">
<input class="dvs" id="ex1" type="number" />
</div>
</div>
</div>
</td>
<script type="text/javascript">
function showContent(id) {
element = document.getElementById(id);
check = document.getElementById("check");
if (check.checked) {
element.style.display='block';
}
else {
element.style.display='none';
}
}
</script>

Cloning a tr and it is appearing at the top instead of at the placement of the tr defined

My tr is defined inside the table tag like this:
<table>
<tr>
<td>
<input type="text" name="customerid">
</td>
</tr>
<tr>
<td>
<div id="stlineitems">
<label for="stlineitems">Item(s)</label>
</td>
<td>
<div class="onlyleft">
<select name="get_Items" id="get_Items" class="selectItemsList" data-rule-required="true" data-msg-required="Choose Item">
<option></option>
</select>
</div>
<div class="moveboxleft">
<input type="text" class="inputwidth form-control rates_input" name="rate_items" data-rule-required="true" data-msg-required="Provide Rate or if not, provide 0 value" />
</div>
<br/>
<div class="nextitem">New Item
</div>
</td>
</tr>
</table>
Now, I am using the following snippet to create the cloned above code, all work but the placement is not right, I want it to be creating underneath the tr tag before this <div class="nextitem"> tag, not sure what I am doing wrong here
$('.createNewItemTag').click(function(){
var obj = $(this).parents('tr').first(),
clonedObj = $(obj[0].outerHTML);
clonedObj.find(".select2-container").remove();
clonedObj.find('.createNewItemTag').remove();
clonedObj.find('td').last().append("<a class='removeItem' href='javascript:void(0)';>Remove</a>");
clonedObj.find(".removeItem").click(function(){
$(this).parents('tr').first().remove();
});
console.log(obj);
obj.parents('table').append(clonedObj);
initSelect2ForNextItem(clonedObj.find(".selectItemsList").first());
});

If I understand your question, you want new cloned <tr> elements to be added BEFORE the element with the "new item" tag.
What we are going to do is utilize jQuery's built in .clone() method instead of doing it ourself. Once we have the cloned object we use your existing code to remove the New Item button and add the Remove button.
After we do that we'll utilize jQuery's .before() method to insert the new, cloned element before the original object. (You could use .after() if you wanted this to be inserted after the original object)
$('.createNewItemTag').click(function(){
var obj = $(this).parents('tr').first();
var clonedObj = obj.clone();
clonedObj.find(".select2-container").remove();
clonedObj.find('.createNewItemTag').remove();
clonedObj.find('td').last().append("<a class='removeItem' href='javascript:void(0)';>Remove</a>");
clonedObj.find(".removeItem").click(function(){
$(this).parents('tr').first().remove();
});
obj.before(clonedObj);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="text" name="customerid">
</td>
</tr>
<tr>
<td>
<div id="stlineitems">
<label for="stlineitems">Item(s)</label>
</div>
</td>
<td>
<div class="onlyleft">
<select name="get_Items" id="get_Items" class="selectItemsList" data-rule-required="true" data-msg-required="Choose Item">
<option></option>
</select>
</div>
<div class="moveboxleft">
<input type="text" class="inputwidth form-control rates_input" name="rate_items" data-rule-required="true" data-msg-required="Provide Rate or if not, provide 0 value" />
</div>
<br/>
<div class="nextitem">New Item
</div>
</td>
</tr>
</table>
You may also want to clear the inputs of the original object so that it is empty after the clone is created. (or clear the inputs of the cloned object, up to you).
References:
https://api.jquery.com/clone/
https://api.jquery.com/after/

Try below code
Use obj.parents('table').find("tr:eq(0)").after(clonedObj); instead of obj.parents('table').append(clonedObj);
$('.createNewItemTag').click(function() {
var obj = $(this).parents('tr').first(),
clonedObj = $(obj[0].outerHTML);
clonedObj.find(".select2-container").remove();
clonedObj.find('.createNewItemTag').remove();
clonedObj.find('td').last().append("<a class='removeItem' href='javascript:void(0)';>Remove</a>");
clonedObj.find(".removeItem").click(function() {
$(this).parents('tr').first().remove();
});
//console.log(obj);
obj.parents('table').find("tr:eq(0)").after(clonedObj);
//initSelect2ForNextItem(clonedObj.find(".selectItemsList").first());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="text" name="customerid">
</td>
</tr>
<tr>
<td>
<div id="stlineitems">
<label for="stlineitems">Item(s)</label>
</td>
<td>
<div class="onlyleft">
<select name="get_Items" id="get_Items" class="selectItemsList" data-rule-required="true" data-msg-required="Choose Item">
<option></option>
</select>
</div>
<div class="moveboxleft">
<input type="text" class="inputwidth form-control rates_input" name="rate_items" data-rule-required="true" data-msg-required="Provide Rate or if not, provide 0 value" />
</div>
<br/>
<div class="nextitem">New Item</div>
</td>
</tr>
</table>
Js Fiddle Demo : JSFiddle

Something like this?
$(document).on('click', '.createNewItemTag', function() {
var rw = $(this).parents('tr');
var ix = rw.index() +1; //remove +1 to insert above curr row
var obj= rw.clone();
obj.addClass('newcol').find('td:first-child').text('New Item');
$('table tr:nth-child('+ix+')').after(obj);
});
table{border-collapse:collapse;}
th,td{border:1px solid #ccc;}
.newcol td{background-color:palegreen;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td colspan="2"><input type="text" value="customerid"></td>
</tr>
<tr>
<td>
<div id="stlineitems"><label for="stlineitems">Item(s)</label></div>
</td>
<td>
<div class="onlyleft">
<select>
<option>Options go here</option>
</select>
</div>
<div class="moveboxleft">
<input type="text" value="Provide Rate" />
</div>
<br/>
<div class="nextitem">New Item
</div>
</td>
</tr>
</table>
Notes:
(1) Switched to using .on() to allow newly added rows to be cloned

jQuery tree traversal from child to closest filtered parent

I have this code snippet from an html page:
<td class="alltablergt ">
<div class="allocsz">
<table class="table-allocsz">
<tbody>
<tr>
<td>
<div class="sigle-sz">
<span class="label-sz">36</span>
<input class="size-quantity" type="tel" value="" name="" >
<div class="available yes"><i aria-hidden="true" class="availablespot"></i></div>
</div>
I am in the input element "size-quantity" and I would reach the "alltablergt" element.
If $this is the size-quantity element, I thought the way to reach the "alltablergt" element was:
$(this).parentsUntil(".alltablergt")
but this doesen't work.
How can I reach it?

You could use closest().
$('.size-quantity').closest(".alltablergt").addClass('highlight');
.highlight {
background: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="alltablergt ">
<div class="allocsz">
<table class="table-allocsz">
<tbody>
<tr>
<td>
<div class="sigle-sz">
<span class="label-sz">36</span>
<input class="size-quantity" type="tel" value="" name="">
<div class="available yes"><i aria-hidden="true" class="availablespot"></i>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>

ajax call not working on <td> tag click

why ajax call $.load not working when i click on <td> tag?
here is the script by the way
$("body").on("click", ".license-table td", function(){
console.log('ehhh')
var pane = $(this).parent('.license-table').data("pane");
var url = $(this).parent('tr').data("href");
$(pane).load(url, function(){
$(".table-content").css({
height: '500px'
}).jScrollPane({
autoReinitialise: true,
hideFocus: true
});
});
});
and here is the Mark up.
<div class="tab-pane" id="license">
<div class="row content-tools">
<div class="col-md-3">
<div class="options enabled">
Allocate Licenses
</div>
</div>
<div class="col-md-3">
<div class="options enabled">
Unallocate Licenses
</div>
</div>
<div class="col-md-3"> </div>
<div class="col-md-3">
<form action="">
<input type="text" name="q" class="col-md-12 search"/>
</form>
</div>
</div>
<div class="row" style="margin:0">
<div class="table-content col-md-12">
<div class="inner table-responsive pade-content-big">
<table class="table dtable license-table" data-pane="#license">
<tr>
<td width="30%"> </td>
<td width="10%">Total</td>
<td width="10%">Distributed</td>
</tr>
<tr data-href="license-details.html">
<td>Product Name</td>
<td>200</td>
<td>50</td>
</tr>
<tr data-href="license-details.html">
<td>Product Name</td>
<td>200</td>
<td>120</td>
</tr>
</table>
</div>
</div>
</div>
</div>
the console.log("ehhh") is show up in my console window, but the XHR request doesnt show up. what's wrong? :(

The .parent() function gets the immediate parent element. When you provide a selector argument, it filters the result; it does not go up the ancestor chain until it finds a matching ancestor. To do that, you should use the .closest() function:
var pane = $(this).closest('.license-table').data("pane");

How to get the div current text box using jquery

I have multiple div's with text box want to get the each div input box value and display it into that div itself
HTML :
<div id="product_data" class="ui-sortable">
<div class="clonedInput" id="add_attribute" style="display: block;">
<div id="add_attributes">
<div id="accordion1">
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong class="attribute_name"></strong> </h3>
<table cellspacing="0" cellpadding="0" id="attribute_data" class="">
<tbody>
<tr>
<td class="attribute_name"><label>Name:</label>
<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
</td>
<td rowspan="3"><label>Value(s):</label>
<textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="clonedInput" id="add_attribute_2" style="display: block;">
<div id="add_attributes" class="woocommerce_attribute wc-metabox ">
<div id="accordion1">
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong class="attribute_name"></strong> </h3>
<table cellspacing="0" cellpadding="0" id="attribute_data" class="">
<tbody>
<tr>
<td class="attribute_name"><label>Name:</label>
<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
</td>
<td rowspan="3"><label>Value(s):</label>
<textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="clonedInput" id="add_attribute_3" style="display: block;">
<div id="add_attributes" class="woocommerce_attribute wc-metabox ">
<div id="accordion1">
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong class="attribute_name"></strong> </h3>
<table cellspacing="0" cellpadding="0" id="attribute_data" class="">
<tbody>
<tr>
<td class="attribute_name"><label>Name:</label>
<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
</td>
<td rowspan="3"><label>Value(s):</label>
<textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
I'm trying to get the input field value "id = attribute_name" and display the value into the " " on blur function and this was dynamic text box

$( "input" ).blur(function() {
var string = $(this).val();
$(this).parent().append(string);
});
This will append the text on removing the cursor from the input . Style it as your requirement. Atleast it should give you an idea of what to do.
http://jsfiddle.net/L4UQJ/

try this..
$("input[type='text']").on('blur', function () {
alert($(this).val());
});

Finally It's working :)
$( "input" ).blur(function() {
var string = $(this).val();
$(this).closest('div').find('h3 > strong').html(string);
});
DEMO

Since those HTML elements are generated dynamically, use this below approach.
$(document).on('blur', '#attribute_name', function () {
console.log($(this).val()); //To get the value of the textbox
$(this).val(' ');
});