We Keep Coding

jQuery - closest input to current input

I have two divs with same class names with one input inside each. First one has id, second - no, I need get closest input to my input with id. I can't set an id to second input, or change class names of divs.
HTML -
<div class="picker">
<input id="myInput"/>
</div>
<div class="picker">
<input/> <-- which I need to get ->
</div>
I have tried to use something like below, but, this operation returns me the first input.
$("#myInput").closest("input")

So you need to pick parent the "picker" and then you need to pick the next "picker" and then find the input.
const inp = $("#myInput").closest('.picker').next('.picker').find('input');
inp.val('found it');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="picker">
<input id="myInput" />
</div>
<div class="picker">
<input/>
<-- which I need to get ->
</div>

How do I make an html text input readonly but be able to update with a script?

I have these inputs that take the values of a from a in my table when I click on a row. I want to make it so that the user cannot change the input themselves but want to bring values into them when a user clicks a table row. I will be passing these inputs in as a form. I know that when the input is like this:
that it will not be updated. Is there any other way to do it with an input. Is there a different type of tag I can use that can be passed through a form?

Rather than a read-only <input>, I'd go with a combination of a display element and a hidden form element. Something like:
<div id="my-display">This is a value</div>
<input id="my-input" name="my-input" type="hidden" />
And in the code update both:
$('#my-display').text(yourValue);
$('#my-input').val(yourValue);
You can style the display to the user however you like and don't have to worry about whether or not it "de-activates" the form input.
If you really want it to be an inactive input, you can use the same approach:
<input class="my-input" type="text" disabled />
<input class="my-input" type="hidden" name="my-input" />
Which may even save you a line of code here, since both can now use .val():
$('.my-input').val(yourValue);

Try disabled keyword as here
<div id="my-display">This is a value</div>
<input id="my-input" name="my-input" type="text" disabled/>
You can change the value by javascript as below:
document.querySelector('#my-input').value = 'the value you want to enter by javascript';

Dynamically adding contents to existed div element

I have created div element for text field, i need to add contents dynamically to that div element. As a novel I'm a little bit confused, I have tried using id for the input tag, can I do it by using javascript?.
<div>
<input type="text" name="fullname" id="name">
</div>
please see above code, please instruct.

To change the value of an input element you have to set the value property of the element like the following way:
document.getElementById('name').value = 'New value';
<div>
<input type="text" name="fullname" id="name">
</div>

How do I disable tabbing in child divs

I have a div element with several children. I need to disable tabbing in all of them. I have been using tabindex but is there any way to disable them all by setting a value in the parent.
I don't want to touch the child divs.

I have no idea what your code looks like but you could grab the parent element and add the tabindex attribute to its children that are inputs using attr() as follows:
$(".wrapper").children("input").attr("tabindex", "-1");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
<input type="text" name="1">
<input type="text" name="2">
<input type="text" name="3">
<input type="text" name="4">
</div>
NOTE: when you say "I don't want to touch the child divs" I'm assuming you mean you don't want to manually go through every instance and add tabindex as it would be time consuming?
More info: http://api.jquery.com/attr/

how to check multiple element for the same event

same behavior to multiple elements.
// html
<div id="">
<input type="hidden" value="1258" /> value of user id to make friend
</div>
<div id="">
<input type="hidden" value="2595" />
</div>
<div id="">
<input type="hidden" value="2563" />
</div>
now i want to check which div to clicked to add friend and to take the hidden value and send it to server using this code
$().click(function(){
$x=$("hidden").value(); // the value is friendID
//then send $x to the server using Ajax
});
I'v tried using it like this
$("#div1,#div2,#div3").click(function(){
$x=$("hidden").value(); // the value is friendID
//then send $x to the server using Ajax
});
but i had more element the code grow and it's not dynamic, also the same thing if i want to make behavior to like button ,i have multiple like button how should i know which post and which like

Your selectors are all wrong. The div elements do not have any id attributes, so selecting them as you are will not work. Secondly, you want to use :hidden or input[type="hidden"] to select the hidden inputs. Finally, to get the value of a form element, use val(), not value().
If you want to make this dynamic, so the code will work for x number of div elements, use a class to identify them and then this within the handler to access the element that raised the event, like this:
<div class="foo">
<input type="hidden" value="1258" /> value of user id to make friend
</div>
<div class="foo">
<input type="hidden" value="2595" />
</div>
<div class="foo">
<input type="hidden" value="2563" />
</div>
$('.foo').click(function(){
x = $(this).find('input[type="hidden"]').val();
alert(x)
});
Example fiddle

try
<div id="div1">
<input type="hidden" value="1258" /> value of user id to make friend
</div>
$("[id^=div]").click(function() {
$x=$(this).find("[type=hidden]").val();
});
or
<div class="classSelector">
<input type="hidden" value="1258" /> value of user id to make friend
</div>
$(".classSelector").click(function() {
$x=$(this).find("[type=hidden]").val();
});