We Keep Coding

how to add two functionality on single click of radio button

i want to add two functionality to the one checkbox one for backend and one for frontend 1st is after clicking it shows that option on front-end and 2nd is after clicking it shows the table to enter data in backend

If I understood you right, you want to click two times on the same element, which will result in 2 differents pre-defined actions.
To do so, you need to call a function that will keep track of the number of times you clicked it.
let clickCount = 0;
function onClick(e) {
clickCount++;
if (clickCount === 1) {
showOptionsOnFrontEnd(); //Your first action
}
else if (clickCount === 2) {
showTable(); //Your second action
}
}
Is that what you need?
A more detailed question could lead to more precise answers though.

How do I add this counter API to my clickHandler so it can count each click with its corresponding value?

In my html I have a form with 4 radio buttons. Each radio button represents an option the user can submit.
I have set up an event listener that listens for a radio button change event:
[].forEach.call(document.querySelectorAll("input[type='radio']"),function(radio)
{
radio.addEventListener("change", handleRadioClick);
});
And this is how my click handler looks like:
function handleRadioClick() //this code happens when user selects this radio button
{
var label = document.querySelector("[for='"+this.id+"']");
//execute more stuff here
}
I now need to add a Doubleclick counter API
Enabler.counter('Option 1 was clicked'); //i.e.
so we can track what option has been clicked.
How would I go about accomplishing this? Thanks so much for any tips!
Note: Plain JS suggestions only please. Thanks!

I want to show a div after pressing on submit button

I need some help
The "close modal" button that you see in the line below is hidden at load because i want to force users to write their names and emails before accessing the content.
<div class="mc-closeModal" data-action="close-mc-modal" data-dojo-attach-point="modalClose" style="">close</div>
What i want to do now is to make it appear again after people have entered their names and emails and pressed on the "Subscribe" button.
I've tried this code below in the console and it works. It submits the details and makes the "close" button appear again.
$(document).ready(function() {
$('iframe').contents().find('input.button').click() //this line targets the submit button "Subscribe"
$("#PopupSignupForm_0 > div.mc-modal > div.mc-closeModal").show() //this line makes the "close" button appear again
});
The problem is that it doesn't work when i add it in the website though.
What i want is pretty simple
When this event happens
$('iframe').contents().find('input.button').click()
I want this to execute
$("#PopupSignupForm_0 > div.mc-modal > div.mc-closeModal").show()

Your code is just two statments one after another. You're not actually binding anything to the click event. If you wanted to use jquery's click you could do something like this:
$('iframe').contents().find('input.button').click(function() {
$("#PopupSignupForm_0 > div.mc-modal > div.mc-closeModal").show()
});
But then you have no idea if the user actually filled in the form. Instead you can
try this:
$('#content__formFields').submit(function() {
var isValid = true;
// Check if empty of not
$(this).find('input[type!="hidden"]').each(function() {
if (!$(this).val()) {
isValid = false;
//change the element's css here so user knows whats missing
}
});
if (isValid)
$("#PopupSignupForm_0 > div.mc-modal > div.mc-closeModal").show()
return isValid
});

Show hide custom metaboxes, live, with jQuery

I am trying to toggle the visibility of some custom meta boxes via jQuery.
I managed to hide them by default and to make them visible when clicking on the correct post format.
I am not finding a solution for making the meta boxes disappear when the user changes the post format.
e.g.
Default: Hidden
Click on "Aside": Show
Switching from "Aside" to any other post format: hide.
I have the following code:
jQuery(document).ready(function () {
jQuery("#postbox-container-2").addClass("hidden");
if (jQuery("input#post-format-video").is(':checked')) {
jQuery("#postbox-container-2").removeClass("hidden");
}
jQuery("input#post-format-video").change(function () {
if (jQuery(this).is(':checked')) {
jQuery("#postbox-container-2").removeClass("hidden");
}
});
});
Any idea?
Different approach based on #zipp fiddle
Query(document).ready(function() {
jQuery( "#postbox-container-2" ).hide();
var toToggle='';
jQuery('input#post-format-video').change(function() {
if (toToggle){
jQuery(toToggle).hide();
}
//alert(this.value+ " is checked");
var selector='#postbox-container-2';
jQuery(selector).toggle();
toToggle=selector;
});
});
even this one works fine but does not change live when I click on a different radio button

Here is a jsfiddle with your example. The change event is triggered only on the checked input. It won't be triggered when it is unchecked for a specific input. In order to know if your specific input is unchecked you need to test if the selected input is yours: $(this).attr('id') == 'post-format-video' and do your action. In my example I am selecting the radio input with $('input:radio[name=myRadio]') therefore you need to adapt your html and code to have the correct selector.
//This selector is triggered when my radio is selected for all input radio that I want to listen to
$('input:radio[name=myRadio]').change(function() {
//if we have a radio button selected previously we hide the div related
if (toToggle){
$(toToggle).hide();
}
//select the div we want to show
var selector;
if ($(this).attr('id')=='post-format-video'){
selector='#postbox-container-2';
}
...
//show it (could have called toggle() )
$(selector).show();
//store it for the next selection
toToggle=selector;

execute jquery command unless user clicks on a div

I have a user search bar that creates a div containing the relevant users and it disappears when you focus out. However I don't want to focus out if I click on the user list div. Is this possible to achieve?
application.js:
$(function() {
$("#user_header_search_form input").focusout(function() {
$('#header_user_list').html('');
});
});
$('#header_user_list').html(''); I don't want to run this link if the user clicks '#header_user_list'

An alternativa approach may be:
$(document).click(function(event){
var clicked = $(event.target);
//if the clicked element is not son of the input or the list, clear the list.
if(clicked.closest("#user_header_search_form input,#header_user_list").size() == 0)
$('#header_user_list').html('');
});
Another option is setting a delay before clearing the list. This will work if the user must pick only one item from the list:
$("#user_header_search_form input").focusout(function() {
setTimeout(function(){
$('#header_user_list').html('');
},50);
});
Hope it helps!