We Keep Coding

Create a label and it's associated element without using ID

I'm gonna create a label element and it's associated input element together using JavaScript. This can be achieved if I use id and for attributes:
// Create input element:
let newInput = document.createElement('Input');
newInput.setAttribute('type', 'radio');
newInput.setAttribute('value', 'y');
newInput.setAttribute('id', 'myInput2');
newInput.setAttribute('name', 'opt');
document.body.appendChild(newInput);
// Create label for new Input:
let newlabel = document.createElement('Label');
newlabel.setAttribute('for', 'myInput2');
newlabel.textContent = 'Option 2:';
document.body.appendChild(newlabel);
<input type='radio' value='x' id='myInput1' name='opt'>
<label for='myInput1'>Option 1:</label>
The problem is: I have so many forms and so many inputs too, so this solution(which Chooses id for any input) looks like to be a nightmare rather than an option. In other hand, it seems ridiculous to create ID for an element just for binding it to a label (Of course it's my opinion)!
Fortunately there is an option in HTML to get rid of these kind of IDs:
// I couldn't find any way to create a new label and it's bounded element without using ID!
<label>
Option 1:
<input type='radio' value='x' name='opt'>
</label>
But I couldn't find it's JavaScript equivalent:(
So my question is: How can I create a label element in JavaScript and bind it to an input element without specifying ID?

you should append input to label, like this:
for (const i of [1, 2]) {
// Create input element:
let newInput = document.createElement('Input');
newInput.setAttribute('type', 'radio');
newInput.setAttribute('value', 'y');
newInput.setAttribute('name', 'opt');
// Create label for new Input:
let newlabel = document.createElement('Label');
newlabel.textContent = `Option ${i}:`;
newlabel.appendChild(newInput);
document.body.appendChild(newlabel);
}

How do I pass a dataset attribute dynamically using user input?

I have a text input box where a user inputs what data-* they want to look for in the DOM. I get this user input on a button click then do a little bit of parsing. How would I get the value of the entered text to be the final part of the HTMLElement.dataset selector?
//HTML for text input
<div class="form-group">
<label for="specificSelector">Specific Selector</label>
<input type="text" class="form-control" id="specificSelector" placeholder="Enter the specific selector here">
</div>
<p id="a"></p>
//JavaScript
var specificSelector = document.getElementById("specificSelector").value;
var a = document.getElementById("a"); // Test element
var parsedSelector = specificSelector.match(/data-(.*)/)[1];
console.log("Parsed selector: ", parsedSelector);
//I need to pass the value of the parsedSelector to the below line
var aData = a.dataset.parsedSelector;
console.log("aData: ", aData);
I have read this from MDN Developers but can't figure it out. It looks like you have to pass the data attribute in camel case but might not be able to do it via a variable?
Thanks in advance.

When you need to access an object property via a variable, you need to use array-bracket syntax.
In the example below, type "data-test" into the text box and then hit TAB.
// Get a reference to the input
var specificSelector = document.getElementById("specificSelector");
var a = document.getElementById("a"); // Test element
// Set up an event handler for when the data is changed and the
// input loses focus
specificSelector.addEventListener("change", function(){
// Extract the custom name portion of the data- attribute
var parsedSelector = specificSelector.value.match(/data-(.*)/)[1];
console.log("Parsed selector: ", parsedSelector);
// Pass the string (stored in the variable) into the dataset object
// of another element to look up the object key.
var aData = a.dataset[parsedSelector];
console.log("aData: ", aData);
});
<div class="form-group">
<label for="specificSelector">Specific Selector</label>
<input type="text" class="form-control" id="specificSelector" placeholder="Enter the specific selector here">
</div>
<div id="a" data-test="test2"></div>

How to affect the change in the original input box?

I have made an input box and i have cloned this input box to a div,let's name them ipbox1 and ipbox2, ipbox2 is the copy of ipbox1 now what i want to do is that when
i enter/change the value in either of them, the dom.value or $("#id").val() should return the updated the value. But now it's only functioning with the ipbox2.
What should i do?
fiddle
$("#ghj").click(function(){
$("#abc").val("Some text");
$("#abc").clone(true).appendTo("#pastehere");
})
$("#abc").on('change',function(){
alert();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type = "text" id = "abc">This is the first box
<div id = "pastehere">
</div>This is the cloned box
<br><button type = "button" id = "ghj">
Clone
</button>

I have update you fiddle: https://jsfiddle.net/gschambial/s6td1bof/7/
var initVal = $('#abc').val();
$("#ghj").click(function(){
$("#abc").val("Some text");
$("#abc").clone(true).appendTo("#pastehere");
})
$("#abc").on('change',function(){
alert();
initVal = $(this).val();
})
$("#get").click(function(){
alert(initVal);
})

You should not append a cloned element with an id as this creates invalid markup (two html elements with the same id).

If you want to be able to read the value of either of them independently, then check out this fiddle
If not, then I must be offtrack. Please add more details about what you need to achieve :)
HTML
<input type = "text" class = "abc">This is the first box
<div id = "pastehere">
</div>This is the cloned box
<br><button type = "button" id = "ghj">
Clone
</button>
JS
var initialInput = $(".abc");
$("#ghj").click(function(){
initialInput.val("Some text");
initialInput.clone(true).appendTo("#pastehere");
})
$(".abc").on('change',function(ev){
var targetInput = $(ev.target);
alert('myValueIs:' + targetInput.val())
});

Grab the value of latest textbox on a particular variable having multiple textbox with same ID

I want the value of last textbox to be grabbed by the varialble on multiple textbox with same ID.
HTML
<input type="text" id="get"><br>
<input type="text" id="get"><br>
<button id="grab">Click</button><br>
SCRIPT
$("#grab").click(function(){
var value = $("#get").val();
});
Or, a way to delete the first textbox might also work. Working Example

Your HTML is invalid: HTML elements can't have the same id attribute.
Use the class attribute, instead.
You can then use .last() to get the last element that matches the .get selector:
$("#grab").click(function(){
var value = $(".get").last().val();
alert(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="get" value="foo"><br>
<input type="text" class="get" value="bar"><br>
<button id="grab">Click</button><br>
(I added the value attributes for demonstrative purposes. Obviously, they can be removed.)
If you want to get the first element's value if the second one is empty, you could do this:
$("#grab").click(function(){
var firstValue = $(".get").val(); // `.val()` gets the first element's value by default
var secondValue = $(".get").last().val();
var result = secondValue || firstValue;
alert(result);
});

If you don't have any control on ids you should use following solution. If you can change the ids you should change them.
You approach will not work because the id is not unique. It will always get the first input.
$("#grab").click(function() {
// var value = $(this).prev("input").val(); // Will work when there is no `<br>`
alert($('input[id="get"]').last().val());
});
Here $('input[id="get"]') will get all the elements having id get and last() will get the last element from it.
Demo: https://jsfiddle.net/orghoLzg/1/

Getting text from input to replace label text in another form

reposting for simplicity. i want to have the text users enter into an input to replace the label text of another form's input. Additionally, the form is a plugin which doesn't let me attach an id to the specific label tag of the text i want to change. how can i do this, in vanilla javascript please.
the input users put text into:
<input class="charInput" id="name1" type="text" onKeyUp="change1(this)" >
the form label i want to change the text in (p.s: cant use the class(not unique to this label), cant add id):
<div id="frm_field_53_container" class="frm_form_field form-field frm_top_container">
<label class="frm_primary_label" for="field_inputactor1">
TEXT TO REPLACE
<span class="frm_required"></span>
</label></div>

Maybe it is not the best solution, but it is a solution that works in Firefox and Chrome (not tested under IE)
findLabelToChange = function() {
var div = document.getElementById("frm_field_53_container");
return div.querySelector("label");
};
customizeText = function(text) {
return text + ' <span class="frm_required"></span>';
};
change1 = function() {
var label = findLabelToChange();
var text = document.getElementById("name1").value;
label.innerHTML = customizeText(text);
};
you can see a example in this feedle
http://jsfiddle.net/HAK5X/1/

Here is a fiddle.
It is one line of code.
http://jsfiddle.net/te3jv/6/
function change1(myInput){
document.getElementById('frm_field_53_container').querySelector("label").innerHTML =myInput.value;
}
Alternatively add <span class="frm_required"></span> to the end of HTML reassignment to keep your empty (but required?) span.