Develop Reference

How to focus on input opened in an overlay that is not in the same parent element as the trigger

I have a search input that is displayed in an overlay on the page. I display that overlay with a simple toggle class function, but when I try to focus on the input along with the overlay activation, it doesn't work and, on mobile for example, the keyboard doesn't open when I toggle the search overlay and if I manually focus the input, when I close the overlay the keyboard remains active.
One mention, the trigger is not in the same html element as the input.
jQuery(document).ready(function($) {
$("#search-lens").click(function(){
$("#search-wrapper").toggleClass("active");
// this is the input id
$("#main-search").focus();
});
$("#search-close").click(function(){
$("#search-wrapper").toggleClass("active");
$("#main-search").blur();
});
});
I expect the input to be focused when I click #search-lens and to blur when I click #search-close

.trigger()
Use .trigger('focus') and .trigger('blur').
Demo
$(".open").click(function() {
$(".dialog").fadeIn();
$('.key').trigger('focus');
});
$(".close").click(function() {
$(".dialog").fadeOut();
$('.key').trigger('blur');
});
<button class='open' type='button'>Open</button>
<section class='dialog' style='display:none'>
<input class='key' type='search'>
<button class='search' type='button'>Search</button>
<button class='close' type='button'>×</button>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Automatically clicking divs present on page

I am trying to automatically click present buttons which are visible on a page, than triggering the scroll functionality after we've clicked the visible options.
I've messed around with the following code, however it didn't work in any formation I applied it.
$( ".follow-button" ).trigger( "click" );
And here's the button HTML.
<button class="follow-button btn-simple"><span class="following-txt">Following</span><span class="follow-txt">Follow</span></button>

for the visible buttons, now how you implemented it, checking the class and ignoring with class hidden or whatever is up to you
const buttons = document.getElementsByTagName('button');
Array.from(buttons).forEach(b => {
b.addEventListener('click', function() {
console.log(b.textContent);
})
b.click();
});
<button>asdf</button>
<button>hfdg</button>
<button>sfdf</button>
<button>ggfg</button>

You can use $(".follow-button:visible").click() to click on all visible buttons.

How do you prevent appending html multiple times in BS modal divs in jQuery?

Whenever I click on an image, a modal box should pop up with an appended paragraph once. I have two issues. Firstly, my header text doesn't append to the header element. Secondly, it keeps appending the same paragraph into the modal box every time I click the laptop.
HTML
<!--Trigger Image -->
<img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/02-512.png" id="laptop" class="openmodal">
<!--Modal Box -->
<div class="question" id="question-modal">
<header id="modal-header">
X
</header>
<div class="answer">
</div>
</div>
JS
var id = this.id;
//Open the modal box
$('.openmodal').on('click', function() {
$('#question-modal').modal('show');
if (id == 'laptop')
$('header').append('<h3>FAQs on laptops</h3>');
$('.answer').append("Mac > any PC");
});
//close modal box
$('.close').on('click', function() {
$('#question-modal').modal('hide');
});
Here's my JSFiddle if that description wasn't clear.
I'm not sure as how to temporarily remove the paragraph when you close the box. I tried .remove() but when the laptop is clicked, the paragraph is removed completely (well no duh). .detach() doesn't work either.

If I'm understanding the desired behavior correctly, then I believe you are looking for .empty()
In your close modal callback, try adding:
$('.answer').empty();

Change modal box onclick to this:
//Open the modal box
$('.openmodal').on('click', function() {
$('#question-modal').modal('show');
if (this.id == 'laptop')
$('header'). append('<h3>FAQs on laptops</h3>');
$('.answer').empty();
$('.answer').append("Mac > any PC");
});
And empty should be in open modal. Otherwise if modal still open on click will add additional paragraph

Close any Bootstrap 3 popover with click on any buttons therein?

I have an app that will have several popovers that uses the html of a hidden DIV. This content may contain a button or buttons that will possibly do something in the app and close the popover, or just close the popover ("Cancel"). Like this:
What I'm looking for is a generic, extensible solution that I can apply to the button(s) to simply close the popover that contains them.
I don't want to wire this with anything specific to a particular button and/or popover.
I tried this and it does not work:
<button class="btn btn-link btn-xs" data-toggle="popover">Cancel</button>

Here you go this also works for tablet to tap outside the popover to hide it.
//HIDES POPOVER ON TABLET WHEN CLICK OUTSIDE
$('html').on('mouseup', function(e) {
if(!$(e.target).closest('.popover').length) {
$('.popover').each(function(){
$(this.previousSibling).popover('hide');
});
}
});

Javascript and a href

Let's suppose that I have the following dropdown after the last div, a dropdown menu appears once he clicks.
<div id="test"> Arrow </div>
I want the user to be able to click on this element and the dropdown appear but also if he mid clicks to be able to open this link directly in a new tab. In other words I want to prevent the default action onclick but still show the link of the element on hover or whatever.
Thank you

you can do
<div id="test"> Arrow </div>

with jquery 1.7+
$('#test a').on('click', function (e) {
if (e.which < 2) { // left mouse button
e.preventDefault();
// and code to show dropdown
}
});