We Keep Coding

how to find closest tr on condition of button is clicked or not

i am trying to find closest tr based on condition whether buttun is clicked or not in that td and based on that i will bind a dropdown element.
My design is dynamically generated.
let newRowContent = "<tr>"
+"<td> <select name='upclist' class='form-control' id='upcList" + i +"'><option selected='selected'>Select</option></select></td>"
+ "<td><input id='tdesc" + i +"' type='number' class='form-control' /></td>"
+ "<td><input id='tamnt" + i +"' type='number' class='form-control' /></td>"
+"<td><input id='trem" + i +"' type='number' class='form-control' /></td>"
+"<td><input type='button' style='margin-left:2%;' value='Add' id='abc' name='grdbtn' class='btnrowvalue3' onclick='insRow()' /></td>"
+ "</tr>";
$("#ipcelltbll tbody").append(newRowContent);
trying to append value in dropdown based on condition which row button is clicked then dropdown of that row will be append based on closest condition don't know whether syntax is correct or not.
var tr = $('input[name="grdbtn"]:click').closest('tr');
tr.find('select[name="upclist"]').append(opt);
Any idea will be appreciated.

Not sure exactly you want. Seems like you want to listen to a click event and alter a select. Basic idea with event delegation.
$("#yourTable tbody").on("click", "button", function (event) {
event.preventDefault();
var row = $(this).closest("tr");
var select = row.find("select");
console.log(select);
});

Concatenate with variable in jquery append-function

How could i concatenate a variable in the append-function in jquery?
I have a loop where I dynamically creates checkboxes in a html-table. And every checkbox needs a unique id since I attach a listener to each of them after the loop.
What I want is to add the increment variable in the for loop (variable i)
so in every loop the id is concatenated with variable i that is
loop 0, name should be cb0
loop 1, name should be cb1
and so on..
here is what I've tried
$('<td valign="top"></td>').append('<input type="checkbox" id=\"cb\" ' + cnt + '>').appendTo(row);
where cnt is the variable that increments with an integer in each loop
Something is wrong with the concatenation here - greatful for help

Seems you have closed the quote early i.e. it is not adding the cnt variable.
Try
$('<td valign="top"></td>').append('<input type="checkbox" id=\"cb' + cnt + '\">').appendTo(row);
Instead of
$('<td valign="top"></td>').append('<input type="checkbox" id=\"cb\" ' + cnt + '>').appendTo(row);

Have you looked at your output at all?
This code:
'<input type="checkbox" id=\"cb\" ' + cnt + '>'
Would produce this output:
<input type="checkbox" id="cb" 1>
That errant 1 has no relation to the id value. Instead, include it as part of the value. You can also remove the \ characters, since you don't need to escape quotes here:
'<input type="checkbox" id="cb' + cnt + '">'
Which would produce:
<input type="checkbox" id="cb1">

You can use jQuery(html, attributes)
$("<td>", {
valign: "top",
html: "<input type=checkbox id=cb" + cnt + ">"
}).appendTo(row);

Javascript function for form created using Javascript

I have a script which adds a new form when a button is clicked to a HTML page with the code as following:
<script>
var counter = 1;
var limit = 10;
function addInput(divName){
if (counter == limit) {
alert("Max number of forms, " + counter );
}
else
{
var newdiv = document.createElement('div');
newdiv.innerHTML = "<form name='frmMain' action='prelucrare.php' method='POST'><div class='slot' id='dynamicInput' align='center'> Masina " + (counter +1 ) + "<table border='1'><tr><td align='right'><label for='marca'>Marca:</label></td><td colspan='2' align='left'>"
+ "<select id='marc' name='marc'><option selected value=''></option>"
+ "<tr><td align='right'><label for='motorizare1'> Motorizare:</label></td> <td><input type='range' name='motorizare1[]Input' min='0.6' max='5' step='0.1' value=2 id=motor1 oninput='outputUpdate1(value)'></td><td><output for=motorizare1 id=moto1>2</output></td></tr>"
+ "</div></form>"
;
}
document.getElementById(divName).appendChild(newdiv);
counter++;
}
</script>
<input type="button" value="Adauga" onClick="addInput('dynamicInput');">
And I have the script bellow which changes the value from the slider.
<script>
function outputUpdate1(mot1) {
document.querySelector('#moto1').innerHTML = mot1;
}
</script>
My problem is that the JS code only changes the input for the first form, even if the slider is activated from another form. In short, the slider should return the value in the form from which it is activate; not only in the first form added.
Thank you!

Going along with my comment, the problem is stemming from the id value being the same across all of your output elements (moto1). You've actually got all the variables you need to make them unique since you're tracking a count of the number of forms on the page (your counter variable). You can use this in place of your current output HTML:
"<input type='range' name='motorizare1[]Input' min='0.6' max='5' step='0.1' value=2 id='motor_" + counter + "' oninput='outputUpdate1(value)'/>"
"<output for=motorizare1 id='moto_" + counter + "'>"
You can update your function to parse out the correct index for the output you want to update since they should be in sync if you use the HTML above:
function outputUpdate1(mot) {
// Get the counter part of the range element's id
var index = mot.id.split('_')[1];
document.querySelector('#moto_' + index).innerHTML = mot;
}
You may need to make some tweaks to code you haven't provided in the question, but that's one way of making the id values unique and how to access them without knowing the exact id ahead of time.

JavaScript Clears My Input Values

I am writing a simple form at work using HTML and have added JavaScript to the page to allow users to add extra rows to a table. This table has input type="Text" tags and select tags. When the user clicks the button to add a row, the JavaScript adds a row, but clears the input and select tags.
My script is
var x = x + 1;
function another()
{
x = x + 1;
y = y + 1;
var bigTable = document.getElementById("bigTable");
bigTable.innerHTML += ("<TR><TD CLASS=\"bigTable2\" ALIGN=\"Center\"><SELECT
NAME=\"PO" + x + "\"><OPTION>Select</OPTION><OPTION>1234567890</OPTION></SELECT>
</TD><TD CLASS=\"bigTable2\" ALIGN=\"Center\"><INPUT TYPE=\"Text\" NAME=\"SKU" + x
+ "\"></TD><TD CLASS=\"bigTable2\" ALIGN=\"Center\"><INPUT TYPE=\"Text\"
NAME=\"modelNum" + x + "\"></TD><TD CLASS=\"bigTable2\" ALIGN=\"Center\"><INPUT
TYPE=\"Text\" NAME=\"itemNum" + x + "\"></TD><TD CLASS=\"bigTable2\"
ALIGN=\"Center\"><INPUT TYPE=\"Text\" NAME=\"qty" + x + "\" ID=\"qty"+x+"\"
onBlur=\"total();\"></TD></TR>");
}
I'm not sure what the issue is here. Is the "+=" statement basically resetting my table like an = statement would?
EDIT: I don't know how to get all of the code to appear, but what is displayed is not all of my code. I have a basic Table and using JavaScript use a += statement to add HTML to it.
EDIT: My table is this:
<TABLE ID="bigTable">
<TR>
<TH>P.O. #</TH>
<TH>SKU #</TH>
<TH>Model #</TH>
<TH>Item #</TH>
<TH>Quantity</TH>
</TR>
<TR>
<TD CLASS="bigTable" ALIGN="Center">
<SELECT NAME="PO1">
<OPTION>Select</OPTION>
<OPTION>1234567890</OPTION>
</SELECT>
</TD>
<TD CLASS="bigTable2" ALIGN="Center"><INPUT TYPE="Text" NAME="SKU1"></TD>
<TD CLASS="bigTable2" ALIGN="Center"><INPUT TYPE="Text" NAME="modelNum1"></TD>
<TD CLASS="bigTable2" ALIGN="Center"><INPUT TYPE="Text" NAME="itemNum1"></TD>
<TD CLASS="bigTable2" ALIGN="Center"><INPUT TYPE="Text" NAME="qty1" ID="qty1" onBlur="total();"></TD>
</TR>
</TABLE>
My JavaScript Replicates everything between the tags. And I use the variable x to update the number in the names for the inputs and dropdowns. Variable Y is used to increment a calculation function.

When you edit the innerHTML of a HTML element, the entire DOM gets re-parsed. Since the input's values aren't actually stored in the input elements's HTML, they are cleared.
An option would be to use DOM manipulation to add the row:
function another(){
x = x + 1;
y = y + 1;
var bigTable = document.getElementById("bigTable");
vat tr = document.createElement('tr');
tr.innerHTML = ("<td class='bigTable2' align='Center'><select name='PO" + x + "'><option>select</option><option>1234567890</option></select></td>"+
"<td class='bigTable2' align='Center'><input type='Text' name='SKU" + x + "'></td>"+
"<td class='bigTable2' align='Center'><input type='Text' name='modelNum" + x + "'></td>"+
"<td class='bigTable2' align='Center'><input type='Text' name='itemNum" + x + "'></td>"+
"<td class='bigTable2' align='Center'><input type='Text' name='qty" + x + "' ID='qty" + x + "' onBlur='total();'></td>");
bigTable.appendChild(tr);
}
Notice how the string no longer contains a <tr> tag.
This codes creates a tr element, then adds the rows to it, then adds that whole, (parsed), tr to the table.
(I also changed the tags / attributes to lowercase and replaced all \" with ' to make it more readable)

To be clear, x += y is the same as writing x = x + y. What's happening here is that you are overwriting the HTML with what you had plus the new row. This clears your inputs because their values are not stored in the HTML (when you type inside one of the input, it's "value" property is not updated in the actual HTML).
So you are basically overwriting your HTML with what was there initially plus some added nodes.
EDIT: Go for Cerbrus's solution. Much cleaner.

What I ended up going with was a dynamic JavaScript code that would create a dynamic array and store values in each column of my current table. Then the code created a new row and the array was then accessed to repopulate the values.

String with whitespace in javascript

I have a String "Magic Word". I need to use it as value in html checkbox generated by javascript.
in javascript
var itemValue= "Magic task";
var opt = "<input type='checkbox' name='test' id='test' value="+ itemValue+ "/>"+itemValue+ "<br />";
alert(opt);
$(optionDiv).append(opt);
In alert it is displaying the actual value but after submitting form i am getting only first word as value.It is ignoring second word.
Thanks
Ravi Kant

You need to wrap the value with single quotes:
"<input type='checkbox' name='test' id='test' value='" + itemValue + "' />"

If you are using jQuery (as I see the usage of $ in your code), it's better to do it with jQuery itself:
var itemValue= "Magic Word";
var opt = $('<input>').attr({
type: 'checkbox',
name: 'test',
id: 'test',
value: itemValue
});
It will prevent any furthur error, for example if you have some ' in your string:
var itemValue= "Magician's Word";

When you do not use quotes the attributes value ends at the whitespace. Your rendered string appears as
<input type='checkbox' name='test' id='test' value=Magic Word />
So the parser sees
value=Magic
and an attribute Word with no value. You can see that with the coloring in the post above.
You need to add single quotes around the value
var opt = "<input type='checkbox' name='test' id='test' value='" + itemValue + "' />"+ itemValue+ "<br />";
^ ^
Where does this fail? If you have a ' in your string. You would need to add a replace method and swap it for #apos;
itemValue = itemValue.replace(/'/g,"#apos;");