Develop Reference

JS function is running twice

I have a js function that should change the value of a html data attribute value based on the current value. So in other words it should act like a toggle between 0 and 1 onclick. Anyways as per logging the current state I have noticed that the state is logged twice times per click. I want that after checking and changing the current value the function should end.
const accordionTabs = Array.from(document.getElementsByClassName('custom-faq-accordion-button-wrapper'));
accordionTabs.forEach(accordionTab => {
accordionTab.addEventListener('click', function checkTabState() {
let state = accordionTab.getAttribute('data-State');
console.log(state);
if ( state == "1" ) {
accordionTab.setAttribute("data-State", "0");
} else {
accordionTab.setAttribute("data-State", "1");
}
});
});
#custom-faq-accordion {
display: flex;
justify-content: center;
align-items: center;
background-color: #FFF6E7;
padding: 60px 0 230px;
min-height: 75vh;
}
#custom-faq-accordion-wrapper {
width: 1200px;
}
#custom-faq-accordion-title {
padding-bottom: 60px;
}
.accordion input[name=panel] {
display: none;
}
.accordion label {
position: relative;
display: block;
padding: 0.2em 1em 0.5em 1.2em;
font-size: 1.5em;
color: black;
cursor: pointer;
transition: all 0.7s cubic-bezier(0.865, 0.14, 0.095, 0.87);
}
.accordion label::after {
font-family:"obviously-wide";
font-size: 39px;
content: "+";
position: absolute;
right: 1em;
width: 1em;
height: 1em;
color: #000;
text-align: center;
border-radius: 50%;
padding-bottom: 5px;
padding-right: 0.5em;
display: flex;
justify-content: center;
align-items: center;
bottom: 0.8em;
}
.accordion label:hover {
color: black;
}
.accordion input:checked + label {
color: black;
}
.accordion input:checked + label:after {
font-family:"obviously-wide";
font-size: 39px;
content: "-";
line-height: 0.8em;
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 5px;
}
.accordion .accordion__content {
overflow: hidden;
height: 0px;
position: relative;
padding: 0 2.5em 0 3em;
color: black ;
transition: height 0.4s cubic-bezier(0.865, 0.14, 0.095, 0.87);
}
.accordion .accordion__content .accordion__header {
padding: 1em 0;
}
.accordion .accordion__content .accordion__body {
font-size: 0.825em;
line-height: 1.4em;
}
/*
* Size Variations
*/
input[name=panel]:checked ~ .accordion__content.accordion__content--small {
height: auto;
padding-bottom: 30px;
padding-left: 7em;
width: 95%;
}
input[name=panel]:checked ~ .accordion__content.accordion__content--med {
height: auto;
}
input[name=panel]:checked ~ .accordion__content.accordion__content--large {
height: auto;
}
.custom-faq-accordion-button-wrapper {
position: relative;
width: 100%;
}
.border-black {
box-shadow: 0 0 0 1px #000;
border-collapse: seperate;
border-spacing: 10px;
border-radius: 59px;
background-color: #fff6e7;
margin-top: 5px;
margin-bottom: 25px;
position: relative;
z-index: 2;
will-change: transform;
}
.border-black:hover {
animation: pressin 0.3s forwards;
}
.custom-faq-accordion-button-shadow.custom-faq-accordion-button-shadow.custom-faq-accordion-button-shadow {
position: absolute;
bottom: -6px;
height: 60px;
width: 100%;
border-radius: 110px;
background-color: #000;
z-index: 1;
display: block;
}
.border-black label {
font-family: vulfSans_bold;
color: black;
font-size: 20px;
line-height: 43px;
padding-top: 10px;
}
#keyframes pressin {
0% {transform: translateY(0px);}
100% {transform: translateY(6px);}
}
<section id="custom-faq-accordion">
<div id="custom-faq-accordion-wrapper">
<h3 id="custom-faq-accordion-title" class="obviously-wide-black-90">FAQ</h3>
<div class="accordion">
<div class="custom-faq-accordion-button-wrapper" data-State="0">
<div class="border-black">
<input type="checkbox" name="panel" id="panel-{{ block.settings.accordion_position }}">
<label for="panel-{{ block.settings.accordion_position }}">Titel</label>
<div class="accordion__content accordion__content--small">
<div class="accordion__body obviously-regular-25">lorem ipsum</div>
</div>
</div>
<div class="custom-faq-accordion-button-shadow"></div>
</div>
<div class="custom-faq-accordion-button-wrapper" data-State="0">
<div class="border-black">
<input type="checkbox" name="panel" id="panel-{{ block.settings.accordion_position }}">
<label for="panel-{{ block.settings.accordion_position }}">Titel</label>
<div class="accordion__content accordion__content--small">
<div class="accordion__body obviously-regular-25">lorem ipsum</div>
</div>
</div>
<div class="custom-faq-accordion-button-shadow"></div>
</div>
<div class="custom-faq-accordion-button-wrapper" data-State="0">
<div class="border-black">
<input type="checkbox" name="panel" id="panel-{{ block.settings.accordion_position }}">
<label for="panel-{{ block.settings.accordion_position }}">Titel</label>
<div class="accordion__content accordion__content--small">
<div class="accordion__body obviously-regular-25">lorem ipsum</div>
</div>
</div>
<div class="custom-faq-accordion-button-shadow"></div>
</div>
</div>
</div>
</section>

your code works fine
Probably the problem is in another part of the code
const accordionTabs = Array.from(document.getElementsByClassName('custom-faq-accordion-button-wrapper'));
accordionTabs.forEach(accordionTab => {
accordionTab.addEventListener('click', e => {
const state = e.target.getAttribute('data-State');
const nextState = (Number(state) + 1) % 2
console.log({
state,
nextState
})
e.target.setAttribute("data-State", nextState);
});
});
.custom-faq-accordion-button-wrapper {
cursor: pointer;
border: 1px solid black;
padding: 10px 5px;
margin-bottom: 5px;
}
<div class="custom-faq-accordion-button-wrapper" data-State="0">1</div>
<div class="custom-faq-accordion-button-wrapper" data-State="0">2</div>

how to hide log in form when click on sign up button

when I click on the login button login form opens but when I click on the signup button login form closed and the sign-up form opens.
currently what is the problem.., I created a login and sign-up form when I click on the login button login form opens properly but when I click on the sign-up button log-in form show behind the sign-up form.
<!--- simple java script function--->
<!--log in-->
<
script >
$("#button_login").click(function() {
$(".login_box").show();
}); <
/script> <
script >
$("#hide").click(function() {
$(".login_box").toggle();
}); <
/script>
<!--sign up-->
<
script >
$("#button_signup").click(function() {
$(".signin_box").show();
}); <
/script> <
script >
$("#hide_box").click(function() {
$(".signin_box").toggle();
}); <
/script>
.button_login a {
color: white;
}
.button_login a:hover {
text-decoration: none;
}
form#login {
padding: 18px;
background: #FFF7EA;
}
#popup {
box-shadow: 2px 2px 18px #888888;
}
#popup .top_head {
width: 85px;
padding: 5px;
color: #FAAC18;
font-size: 24px;
font-weight: 600;
align-items: center;
margin-left: auto;
margin-right: auto;
}
input#e_name {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: white;
border: 0;
border-bottom: 1px solid #FAAC18;
color: #333;
display: block;
font-size: 16px;
margin-top: 5px;
outline: 0;
padding: 7px 12px 10px;
width: 100%;
}
.button_login_header {
padding-left: 17px;
margin-top: 20px;
}
.button_login_header button {
width: 470px;
padding: 5px;
color: white;
border: 1px solid #FAAC18;
border-radius: 3px;
background: #FAAC18;
}
.form-group {
padding: 15px;
margin-bottom: 0rem;
}
label {
display: inline-block;
margin-bottom: 0.0rem;
}
.forget {
padding-left: 20px;
}
#popup {
pointer-events: auto;
width: 550px;
height: auto;
background-color: white;
position: fixed;
top: 100px;
left: 30%;
z-index: 3;
justify-content: center;
align-items: center;
}
label.popupCloseButton.close-btn.fa.fa-times {
font-size: 27px;
padding-top: -1px;
}
.popupCloseButton {
padding: 30px;
color: #FAAC18;
cursor: pointer;
display: inline-block;
font-family: arial;
font-weight: bold;
position: absolute;
top: -21px;
right: 19px;
font-size: 25px;
line-height: 30px;
width: 30px;
height: 30px;
text-align: center;
}
.signup {
width: 270px;
align-items: center;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
.sign_button {
border: none;
cursor: pointer;
background: none;
color: #0056b3;
}
.sign_button:hover {
color: #0056b3;
text-decoration: underline;
}
/********************Sign Up form***************/
.f_name {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: white;
border: 0;
border-bottom: 1px solid #FAAC18;
color: #333;
display: block;
font-size: 16px;
margin-top: 3px;
outline: 0;
padding: 7px 12px 10px;
width: 100%;
}
.button_register button {
width: 330px;
padding: 5px;
align-items: center;
margin-left: 20%;
margin-right: auto;
justify-content: center;
color: white;
border: 1px solid rgb(250, 172, 24);
border-radius: 3px;
background: rgb(250, 172, 24);
}
div#popup_sign {
padding: 10px;
pointer-events: auto;
width: 550px;
height: auto;
background-color: white;
position: fixed;
top: 50px;
left: 30%;
z-index: 3;
display: none;
justify-content: center;
align-items: center;
}
#popup_sign .top_head {
width: 115px;
padding: 5px;
color: #FAAC18;
font-size: 24px;
font-weight: 600;
align-items: center;
margin-left: auto;
margin-right: auto;
}
button.btn_login {
width: 330px;
padding: 5px;
align-items: center;
margin-left: 20%;
margin-right: auto;
margin-top: 5px;
justify-content: center;
color: #FAAC18;
border: 1px solid rgb(250, 172, 24);
border-radius: 3px;
background-color: white;
}
<section class="head_login">
<div class="login_box" id="popup">
<div class="login_box" id="popup">
<label for="" class="popupCloseButton close-btn fa fa-times" id="hide" onclick="closeNav()"></label>
<div class="top_head">
<text class="login">Log In </text>
</div>
<form id="login" action="/action_page.php">
<div class="form-group l_box">
<label for="f_name">Mobile Number:</label><br />
<input type="tel" class="l_input" id="e_name" placeholder="Enter Number" aria-required="false">
</div>
<div class="form-group l_box">
<label for="f_name">Password:</label><br />
<input type="password" class="l_input" id="e_name" placeholder="password" aria-required="false">
</div>
<div class="forget">Forget Your Password?</div>
<div class="button_login_header">
<button type="submit">LOGIN</button>
</div>
</form>
</div>
<div class="signup">
<text>Don't have account?<button type="submit" id="button_signup" class="sign_button"><a href="#popup_sign">SIGN UP</button></text>
</div>
<!---sign up-->
<div class="signin_box" id="popup_sign">
<label for="" class="popupCloseButton close-btn fa fa-times" id="hide_box" onclick="closeNav()"></label>
<div class="top_head">
<text class="sign_up">Sign Up </text>
</div>
<form id="Sign" action="/action_page.php">
<div class="form-group S_box">
<label for="S_name">Full Name :</label><br />
<input type="text" class="f_name" id="S_name" placeholder="Full Name">
</div>
<div class="form-group S_box">
<label for="email">Enter E-mail Address:</label><br />
<input type="tel" class="f_name" id="email" placeholder="E-Mail Address">
</div>
<div class="form-group l_box">
<label for="mobile_number">Mobile Number:</label><br />
<input type="tel" class="f_name" id="mobile_number" placeholder="Enter Number">
</div>
<div class="form-group l_box">
<label for="password">Password:</label><br />
<input type="password" class="f_name" id="password" placeholder="password">
</div>
<div class="button_register">
<button type="submit">Register</button>
</div>
<div class="button_log" id="login_submit">
<button type="submit" class="btn_login">Login</button>
</div>
</form>
</div>
Anyone can help to create this type using javascript..?

Based on your code snippet there is no login form behind the sign-up form.
What is it that you want exactly? If your asking for a way to close one form when the other is open you could try this.
$("#button_login").click(function() {
$(".signin_box").hide();
$(".login_box").show();
});
$("#hide").click(function() {
$(".login_box").hide();
$(".signin_box").hide();
});
$("#button_signup").click(function() {
$(".login_box").hide();
$(".signin_box").show();
});
$("#hide_box").click(function() {
$(".signin_box").hide();
$(".login_box").hide();
});
.button_login a {
color: white;
}
.button_login a:hover {
text-decoration: none;
}
form#login {
padding: 18px;
background: #FFF7EA;
}
#popup {
box-shadow: 2px 2px 18px #888888;
}
#popup .top_head {
width: 85px;
padding: 5px;
color: #FAAC18;
font-size: 24px;
font-weight: 600;
align-items: center;
margin-left: auto;
margin-right: auto;
}
input#e_name {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: white;
border: 0;
border-bottom: 1px solid #FAAC18;
color: #333;
display: block;
font-size: 16px;
margin-top: 5px;
outline: 0;
padding: 7px 12px 10px;
width: 100%;
}
.button_login_header {
padding-left: 17px;
margin-top: 20px;
}
.button_login_header button {
width: 470px;
padding: 5px;
color: white;
border: 1px solid #FAAC18;
border-radius: 3px;
background: #FAAC18;
}
.form-group {
padding: 15px;
margin-bottom: 0rem;
}
label {
display: inline-block;
margin-bottom: 0.0rem;
}
.forget {
padding-left: 20px;
}
#popup {
pointer-events: auto;
width: 550px;
height: auto;
background-color: white;
position: fixed;
top: 100px;
left: 30%;
z-index: 3;
display: none;
justify-content: center;
align-items: center;
}
label.popupCloseButton.close-btn.fa.fa-times {
font-size: 27px;
padding-top: -1px;
}
.popupCloseButton {
padding: 30px;
color: #FAAC18;
cursor: pointer;
display: inline-block;
font-family: arial;
font-weight: bold;
position: absolute;
top: -21px;
right: 19px;
font-size: 25px;
line-height: 30px;
width: 30px;
height: 30px;
text-align: center;
}
.signup {
width: 270px;
align-items: center;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
.sign_button {
border: none;
cursor: pointer;
background: none;
color: #0056b3;
}
.sign_button:hover {
color: #0056b3;
text-decoration: underline;
}
/********************Sign Up form***************/
.f_name {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: white;
border: 0;
border-bottom: 1px solid #FAAC18;
color: #333;
display: block;
font-size: 16px;
margin-top: 3px;
outline: 0;
padding: 7px 12px 10px;
width: 100%;
}
.button_register button {
width: 330px;
padding: 5px;
align-items: center;
margin-left: 20%;
margin-right: auto;
justify-content: center;
color: white;
border: 1px solid rgb(250, 172, 24);
border-radius: 3px;
background: rgb(250, 172, 24);
}
div#popup_sign {
padding: 10px;
pointer-events: auto;
width: 550px;
height: auto;
background-color: white;
position: fixed;
top: 50px;
left: 30%;
z-index: 3;
display: none;
justify-content: center;
align-items: center;
}
#popup_sign .top_head {
width: 115px;
padding: 5px;
color: #FAAC18;
font-size: 24px;
font-weight: 600;
align-items: center;
margin-left: auto;
margin-right: auto;
}
button.btn_login {
width: 330px;
padding: 5px;
align-items: center;
margin-left: 20%;
margin-right: auto;
margin-top: 5px;
justify-content: center;
color: #FAAC18;
border: 1px solid rgb(250, 172, 24);
border-radius: 3px;
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>
<body>
<div class="login_box" id="popup">
<label for="" class="popupCloseButton close-btn fa fa-times" id="hide" onclick="closeNav()"></label>
<div class="top_head">
<text class="login">Log In </text>
</div>
<form id="login" action="/action_page.php">
<div class="form-group l_box">
<label for="f_name">Mobile Number:</label><br />
<input type="tel" class="l_input" id="e_name" placeholder="Enter Number" aria-required="false">
</div>
<div class="form-group l_box">
<label for="f_name">Password:</label><br />
<input type="password" class="l_input" id="e_name" placeholder="password" aria-required="false">
</div>
<div class="forget">Forget Your Password?</div>
<div class="button_login_header">
<button type="submit">LOGIN</button>
</div>
</form>
</div>
<div class="signup">
<text>Don't have account?<button type="submit" id="button_signup" class="sign_button"><a href="#popup_sign">SIGN
UP </a></button></text>
</div>
<!---sign up-->
<div class="signin_box" id="popup_sign">
<label for="" class="popupCloseButton close-btn fa fa-times" id="hide_box" onclick="closeNav()"></label>
<div class="top_head">
<text class="sign_up">Sign Up </text>
</div>
<form id="Sign" action="/action_page.php">
<div class="form-group S_box">
<label for="S_name">Full Name :</label><br />
<input type="text" class="f_name" id="S_name" placeholder="Full Name">
</div>
<div class="form-group S_box">
<label for="email">Enter E-mail Address:</label><br />
<input type="tel" class="f_name" id="email" placeholder="E-Mail Address">
</div>
<div class="form-group l_box">
<label for="mobile_number">Mobile Number:</label><br />
<input type="tel" class="f_name" id="mobile_number" placeholder="Enter Number">
</div>
<div class="form-group l_box">
<label for="password">Password:</label><br />
<input type="password" class="f_name" id="password" placeholder="password">
</div>
<div class="button_register">
<button type="submit">Register</button>
</div>
<div class="button_log" id="login_submit">
<button type="submit" class="btn_login">Login</button>
</div>
</form>
</div>
</body>
</html>
You could even remove the hide-box function and replace the hide-box element with the hide element

Mailchimp unstyled form does not submit on the webpage

I have created a simple hardcoded popup with an unstyled Mailchimp form. But when I deploy it to a WordPress webpage through the "Insert Headers and Footers" plugin it does not work. When I test the code on an online HTML editor, then it works. I am trying to find out what is the problem, I presume that there is somewhere on the server-side something that is blocking the link to be clicked.
code for the popup:
<script>
var element = document.getElementById("wrapper");
var t=setTimeout(openPopUp,3000);
function openPopUp() {
element = document.getElementById("wrapper");
element.style.visibility = "visible";
element.style.opacity = "1";
}
/* Get all elements with class="close" */
function zatvori() {
var x = document.getElementById("wrapper");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<!DOCTYPE html>
<html lang="de-CH">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Newsletter XXX</title>
<style>
* {
box-sizing: border-box;
margin: 0;
font-family: 'Roboto', Arial, sans-serif;
line-height: 1.2;
}
#wrapper {
position: relative;
height: 950px;
max-width: 100%;
overflow: hidden;
background-size: cover;
background-position: right;
background-repeat: no-repeat;
display: block;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.7s;
transition: opacity 0.7s;
}
#mask {
position: absolute;
top: 0;
left: 0;
width: 430px;
height: 950px;
opacity: 0.5;
-webkit-box-shadow: 5px 0px 25px 0px rgba(255,255,255,1);
-moz-box-shadow: 5px 0px 25px 0px rgba(255,255,255,1);
box-shadow: 5px 0px 25px 0px rgba(255,255,255,1);
}
.content {
position: absolute;
width: 435px;
height: auto;
padding: 28px 25px;
background-color: #82BB28;
z-index: 1;
}
/* Style the close button (span) */
.close {
cursor: pointer;
color:white;
float: right;
position: absolute;
top: 5%;
right: 2%;
padding: 12px 16px;
transform: translate(0%, -50%);
}
.close:hover {background: red;}
div .text-1 p {
text-transform: uppercase;
font-weight: normal;
font-size: 18px;
margin: 0;
line-height: 1.1;
text-transform: uppercase;
color: #000;
}
.text-spacing {
letter-spacing: 1px;
}
.text-2 p {
margin: 40px 0 30px 0;
text-transform: uppercase;
font-size: 19px;
font-weight: bold;
letter-spacing: 1px;
}
.text-3 {
font-size: 12px;
color: #A1A199;
}
.email-btn {
display: flex;
justify-content: space-between;
}
/* Full-width input fields */
input[type=text], input[type=email] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
textarea {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
/* Set a style for button */
.button-form {
background-color: #04AA6D;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.button-form:hover {
opacity:1;
}
#ad-email {
height: 36px;
width: 65%;
padding: 0px 14px;
background-color: #fff;
border: 1px solid #ababab;
border-radius: 3px;
font-size: 12px;
color: #332c2c;
}
/*placeholder*/
::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
font-size: 10px;
color: #ababab;
}
::-moz-placeholder {
/* Firefox 19+ */
font-size: 10px;
color: #ababab;
}
:-ms-input-placeholder {
/* IE 10+ */
font-size: 10px;
color: #ababab;
}
:-moz-placeholder {
/* Firefox 18- */
font-size: 10px;
color: #ababab;
}
#send {
width: 29%;
height: 36px;
background-color: #fff;
border: 1px solid #000;
border-radius: 3px;
font-weight: bold;
font-size: 10px;
color: #000000;
cursor: pointer;
transition: all 0.3s;
}
#send:hover {
background-color: #332c2c;
color: #fff;
}
.accept {
position: relative;
margin: 14px 0 35px 0;
}
#check {
position: absolute;
top: 0;
left:0;
opacity: 0;
}
.accept label {
display: flex;
cursor: pointer;
font-size: 10px;
line-height: 12px;
}
.checkbox-box {
display: inline-block;
width: 12px;
height: 12px;
background-color: #fff;
border: 1px solid #332c2c;
}
#check:checked+label>.checkbox-box {
background-color: #332c2c;
}
.checkbox-label {
margin-left: 5px;
width: calc(100% - 18px);
line-height: 14px;
}
.checkbox-label a {
color: #000;
display: block;
}
.profit-1 {
font-size: 20px;
line-height: 25px;
}
ul.benefits {
column-count: 2;
margin-left: 15px;
padding: 0;
}
li {
width: 95%;
font-size: 10px;
line-height: 14px;
}
#media all and (max-width: 434px) {
.content {
width: 100%;
}
}
#media all and (max-width: 387px) {
.text-1 p, .text-2 p {
font-size: 20px;
}
}
#media all and (max-width: 379px) {
.content {
padding: 20px;
}
.text-2 p {
margin: 20px 0 30px 0;
}
#inputs {
position: relative;
padding-bottom: 15px;
}
#ad-email {
width: 100%;
}
#send {
width: 50%;
position: absolute;
bottom: 0;
left: 0;
}
.checkbox-label a {
display: inline;
}
.profit {
margin-top: 20px;
}
ul.benefits {
column-count: 1;
}
li {
width: 100%;
}
}
#media all and (max-width: 324px) {
.profit-1 {
font-size: 16px;
line-height: 20px;
}
.text-1 p {
text-align: center;
}
.text-2 p {
margin: 15px 0 20px 0;
text-align: center;
}
#send {
left: 50%;
transform: translateX(-50%);
}
}
</style>
</head>
<body>
<!-- width - 655 x height -450-->
<div id="wrapper">
<div id="mc_embed_signup">
<form action="https://ozg.us3.list-manage.com/subscribe/post?u=da98377a6d05e2f01558d3e04&id=67aaab10f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mask"></div>
<div class="content">
<div class="text-1">
<p>OZG - DER SPEZIALIST FÜR KOMPLETTAUSSTATTUNG IM<span class="close" onclick="zatvori()">X</span></p>
<p class="text-spacing"> GESUNDHEITSWESEN</p>
</div>
<div class="text-2">
<p>Haben Sie eine Anfrage oder möchten einen persönlichen Beratungstermin buchen?</p>
</div>
<!--
<div id="inputs">
<div class="email-btn">
<input type="email" name="#" placeholder="Adres e-mail" id="ad-email" required />
<input type="submit" name="#" id="send" value="ZAPISUJĘ    →">
</div>
</div>
-->
<!--New code-->
<div id="mc_embed_signup_scroll">
<div class="indicates-required"><span class="asterisk">*</span>zeigt erforderlich an</div>
<div class="mc-field-group email-btn text-3">
<input type="email" value="" name="EMAIL" placeholder="Email Address *" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group text-3">
<input type="text" value="" name="FNAME" placeholder="Name" class="" id="mce-FNAME">
</div>
<div class="mc-field-group text-3">
<input type="text" value="" name="LNAME" placeholder="Vorname" class="" id="mce-LNAME">
</div>
<div class="mc-field-group text-3">
<input type="text" value="" name="UNTERNEHME" placeholder="Unternehmen" class="" id="mce-UNTERNEHME">
</div>
<div class="mc-field-group">
<textarea rows="4" cols="50" name="NACHRICHT" class="text-3" form="usrform" id="mce-NACHRICHT" placeholder="Nachricht">Nachricht
</textarea>
</div>
<div class="accept">
<input type="checkbox" name="#" value="true" id="check" required>
<label for="check"><span class="checkbox-box"></span><span class="checkbox-label">Ja, ich möchte aktuelle News und Aktionen erhalten
</span></label>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_da98377a6d05e2f01558d3e04_67aaab10f0" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Abonnieren" name="subscribe" id="mc-embedded-subscribe" class="button-form"></div>
</div>
</div>
</form>
</div>
</div>
<!--End mc_embed_signup-->
</body>
</html>
So the endpoint does not go to Mailchimp, instead goes to wp-admin/admin-ajax.php
Any help is much appreciated.

Angular 9: how prevent the iOS keyboard of disappearing when changing focus from an input to another inside a form

Inside my Angular app , i ve this form template :
<div class="row">
<div class="col-md-4">
<div class="form-input">
<label>
<input required>
<span class="placeholder">Name</span>
<button class="reset_input border-0 bg-transparent p-0 m-0"><i class="icon-delete"></i>
</button>
</label>
<span class="error "><span class="alert-icon icon-error-severe" aria-hidden="true"></span>Caractère invalide</span>
</div>
</div>
<div class="col-md-4">
<div class="form-input">
<label>
<input required>
<span class="placeholder">Surname</span>
</label>
</div>
</div>
<div class="col-md-4">
<div class="form-input">
<label>
<input required>
<span class="placeholder">CIN</span>
</label>
</div>
</div>
<div class="col-md-4">
<div class="form-input">
<label>
<input required>
<span class="placeholder">Ville</span>
</label>
</div>
</div>
<div class="col-md-4">
<div class="form-input">
<label>
<input required>
<span class="placeholder">Departement</span>
</label>
</div>
</div>
</div>
And i'm applying this css :
.bloc_advanced_search {
padding-top: 0.938rem;
position: relative;
margin-bottom: 1.875rem;
padding-bottom: 0.938rem;
}
#search_collapse { padding-top: 1.563rem;}
#search_collapse.show {
padding-bottom: 2.813rem;
}
.bloc_advanced_search .title_home {
font-size: 1.875rem;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.13;
letter-spacing: normal;
color: #ffffff;
padding-bottom: 0.9375rem;
position: relative;
width: calc(100% - 3.75rem);
}
.bloc_advanced_search .title_home::after {
position: absolute;
bottom: 0;
left: 0;
width: 1.875rem;
height: 0.375rem;
content: "";
background: #ff7900;
}
.bloc_advanced_search .form-input {
margin: 0 0 1.25rem;
width: 100%;
}
.bloc_advanced_search .form-input label {
position: relative;
display: block;
width: 100%;
min-height: 2.813rem;
}
.bloc_advanced_search .form-input .placeholder {
position: absolute;
display: block;
top: 1.375rem;
z-index: 2;
font-size: 1.125rem;
transition: all 200ms ease-in-out;
width: 100%;
cursor: text;
color: #808080;
}
.bloc_advanced_search .form-input input {
background: #000;
position: absolute;
top: 0.625rem;
z-index: 1;
width: 100%;
font-size: 1.125rem;
border: 0;
border-bottom: 1px solid #d8d8d8;
transition: border-color 200ms ease-in-out;
outline: none;
padding: 0;
margin: 0;
color: #fff;
padding-right: 2.813rem;
border-radius: 0;
box-shadow: none;
outline: none;
}
.bloc_advanced_search .form-input input {
height: 2.813rem;
}
.bloc_advanced_search .form-input input::-ms-clear {
display: none;
}
.bloc_advanced_search .form-input input:focus,
.bloc_advanced_search .form-input input:valid {
border-bottom: 2px solid #fff;
}
.bloc_advanced_search .form-input input:focus + .placeholder,
.bloc_advanced_search .form-input input:valid + .placeholder {
top: 0;
cursor: inherit;
font-size: 0.75rem;
color: #808080;
}
.bloc_advanced_search .btn-bottom {
padding-top: 1.25rem;
}
.bloc_advanced_search .rectangle {
width: 3.125rem;
height: 3.125rem;;
padding: 1.188rem 1rem;
background-color: #ff7900;
color: #fff;
position: absolute;
right: 0.938rem;
top: 0;
}
.bloc_advanced_search .rectangle::after {
content: "\e93f";
font-family: icon-orange, sans-serif;
transform: rotate(90deg);
display: block;
font-size: 1.25rem;
vertical-align: top;
margin-top: -0.313rem;
}
.bloc_advanced_search .rectangle.disabled {
background-color: #333333;
color: #000;
}
.bloc_advanced_search.interne .rectangle {
top: -0.938rem;
}
.bloc_advanced_search.interne .rectangle[aria-expanded=false]::after {
transform: rotate(-90deg);
}
.bloc_advanced_search .reset_input {
position: absolute;
right: 0.625rem;
bottom: -0.188rem;
font-size: 1.5rem;
z-index: 2;
color: #fff;
line-height: normal;
}
My problem is in particular in IPAD mode ,
When changing my focus from an input to another , the IOS Keyboard seems to be closed and reopened betwen an input to another , that results me to double click each time on every input to get it fosused (and in parallel a close/open keyboard each time
My purpose , is to , to keep the keyboard appearing when flying from an input to another , and with a simple one ckick , setting focus on desired input and beeing able to write.
Of course when click outside the form or inputs zone , the keyboard should diseppear .
Is there any simple way to do it properly ??

i correct it
by changing z-index , and making the input in front of the placeholder
Furthemore i set the background of input as transparent to make the plaeholder visible also
.bloc_advanced_search .form-input input {
background: transparent; /* <- THIS */
position: absolute;
top: 0.625rem;
z-index: 3; /* <- THIS */
width: 100%;
font-size: 1.125rem;
border: 0;
border-bottom: 1px solid #d8d8d8;
transition: border-color 200ms ease-in-out;
outline: none;
padding: 0;
margin: 0;
color: #fff;
padding-right: 2.813rem;
border-radius: 0;
box-shadow: none;
outline: none;
}

How to sort a group of elements using jquery sortable and prevent a spot from being placed

I have a list of categories, each with their own questions below them. I want to sort all categories alongside with their questions.
With my current code I can only sort the category bar but the questions are left in place.
This is my html (questions and categories can be any amount because when creating them they can be added dynamically):
<span id="sortablecats" class="ui-sortable">
<label class="categorytitle ui-sortable-handle" style="">jjjj</label>
<div class="row ui-sortable-handle" id="questionrow">
<div class="col-md-8">
<p class="questionclass">hhhh</p>
</div>
<div class="col-md-4">
<div class="container text-right">
<input type="radio" name="questionlist[jjjj][hhhh]" id="radio-1" value="ok" required="">
<label class="radiotoggle" for="radio-1"><span class="radio">Ok</span></label>
<input type="radio" name="questionlist[jjjj][hhhh]" id="radio-2" value="fout" checked="">
<label class="radiotoggle" for="radio-2"><span class="radio">Fout</span></label>
<input type="radio" name="questionlist[jjjj][hhhh]" id="radio-3" value="nvt">
<label class="radiotoggle" for="radio-3"><span class="radio">N.v.t</span></label>
</div>
</div>
<div class="col-md-8">
<p class="questionclass">jjj</p>
</div>
<div class="col-md-4">
<div class="container text-right">
<input type="radio" name="questionlist[jjjj][jjj]" id="radio-4" value="ok" required="" checked="">
<label class="radiotoggle" for="radio-4"><span class="radio">Ok</span></label>
<input type="radio" name="questionlist[jjjj][jjj]" id="radio-5" value="fout">
<label class="radiotoggle" for="radio-5"><span class="radio">Fout</span></label>
<input type="radio" name="questionlist[jjjj][jjj]" id="radio-6" value="nvt">
<label class="radiotoggle" for="radio-6"><span class="radio">N.v.t</span></label>
</div>
</div>
</div>
<label class="categorytitle ui-sortable-handle" style="">Testt</label>
<div class="row ui-sortable-handle" id="questionrow">
<div class="col-md-8">
<p class="questionclass">test</p>
</div>
<div class="col-md-4">
<div class="container text-right">
<input type="radio" name="questionlist[Testt][test]" id="radio-7" value="ok" required="">
<label class="radiotoggle" for="radio-7"><span class="radio">Ok</span></label>
<input type="radio" name="questionlist[Testt][test]" id="radio-8" value="fout" checked="">
<label class="radiotoggle" for="radio-8"><span class="radio">Fout</span></label>
<input type="radio" name="questionlist[Testt][test]" id="radio-9" value="nvt">
<label class="radiotoggle" for="radio-9"><span class="radio">N.v.t</span></label>
</div>
</div>
</div>
</span>
And my js:
$( "#sortablecats" ).sortable({
placeholder: "ui-state-highlight",
connectWith: "#questionrow",
cancel: "#questionrow"
});
I have a jsfiddle to demonstrate what is currently happening
How can I make it so that I only sort a category with all its questions? And only be able to sort them above or below other groups (so not a group in the middle of another group)?

You need to put all of the sortable contents in the same child div and link them to the parent.
For example having the parent div like so :
<div id="sortMyContents">
<div>Content to be draggable with everything inside</div>
<div>Content to be draggable with everything inside</div>
</div>
Following this logic your code should be :
$("#sortablecats").sortable({
connectWith: "#questionrow",
cancel: "#questionrow"
});
/* Dropdown menu */
.dropdown {
position: relative;
display: inline-block;
}
.btn-success {
background-color: #10355e !important;
border: 1px solid #10355e !important;
}
.bar {
height: 18px;
background: green;
}
.savewpi {
margin-top: 10px;
}
.deletefileclass {
cursor: pointer;
font-size: 20px;
color: #10355e;
}
.btn-success:hover {
background-color: #051d38 !important;
border: 1px solid #051d38 !important;
}
.displaynonecoid {
display: none;
}
.lijstnaamtitle {
font-size: 20px;
color: #212529;
}
.lijsttitle {
width: 85% !important;
margin-top: 0px !important;
}
.lijstresult {
background-color: #10355e;
color: #fff;
padding: 20px;
font-size: 20px;
border-radius: 5px;
text-align: center;
margin-top: 15px;
display: none;
}
.horscroll {
overflow-x: scroll !important;
}
.hiddenupload {
display: none;
}
.addsubpage {
display: none;
}
.progress-bar {
background-color: #10355e !important;
}
.fileDisplayArea img {
max-width: 100% !important;
}
.tarievenhead {
background-color: #10355e;
color: #fff;
}
.trinv {
background-color: #edeaea;
}
.companylogo {
max-width: 100%;
}
.headerlogo {
max-height: 100px;
padding-top: 10px;
padding-bottom: 10px;
}
.switch-field {
font-family: "Lucida Grande", Tahoma, Verdana, sans-serif;
padding: 40px;
overflow: hidden;
}
.switch-title {
margin-bottom: 6px;
}
.switch-field input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}
.switch-field label {
float: left;
}
.switch-field label {
display: inline-block;
width: 60px;
background-color: #e4e4e4;
color: rgba(0, 0, 0, 0.6);
font-size: 14px;
font-weight: normal;
text-align: center;
text-shadow: none;
padding: 6px 14px;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.container label {
position: relative;
}
/* Base styles for spans */
.container span::before,
.container span::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
/* Radio buttons */
.container span.radio:hover {
cursor: pointer;
}
.addwerkplekinspectie input[type="radio"] {
display: none;
}
.questionclass {
margin-left: 15px;
font-size: 17px;
font-weight: 500;
border-bottom: 2px solid #e9e9e9;
height: 90%;
}
.nomarginleft {
margin-left: 0px !important;
}
.inputtitles {
font-size: 15px;
font-weight: 500;
margin-bottom: 30px;
margin-left: 10px;
}
.borderbottom {
border-bottom: 2px solid #ccc;
}
.text-right {
text-align: right;
margin-top: 5px;
}
.radiotoggle {
display: inline-block;
margin-bottom: .5rem;
margin-left: 60px;
position: relative !important;
right: 0px;
}
.container span.radio::before {
left: -52px;
width: 45px;
height: 25px;
background-color: #10355e;
border-radius: 50px;
}
.container span.radio::after {
left: -49px;
width: 17px;
height: 17px;
border-radius: 10px;
background-color: #6C788A;
transition: left .25s, background-color .25s;
}
input[type="radio"]:checked+label span.radio::after {
left: -27px;
background-color: #ffffff;
}
.categorytitle {
font-size: 20px;
background-color: #10355e;
padding: 10px;
color: #fff;
display: block;
border-radius: 3px;
}
.switch-field label:hover {
cursor: pointer;
}
.switch-field input:checked+label {
background-color: #A5DC86;
-webkit-box-shadow: none;
box-shadow: none;
}
.switch-field label:first-of-type {
border-radius: 4px 0 0 4px;
}
.switch-field label:last-of-type {
border-radius: 0 4px 4px 0;
}
.deletedemployee {
display: none;
font-size: 20px;
padding: 20px;
text-align: center;
background-color: #10355e;
color: #fff;
margin-bottom: 20px;
border-radius: 4px;
width: 100%;
}
.deletewpi {
display: none;
font-size: 20px;
padding: 20px;
text-align: center;
background-color: #10355e;
color: #fff;
margin-bottom: 20px;
border-radius: 4px;
width: 100%;
}
.deletedtemplate {
display: none;
font-size: 20px;
padding: 20px;
text-align: center;
background-color: #10355e;
color: #fff;
margin-bottom: 20px;
border-radius: 4px;
width: 100%;
}
.addedemployee {
display: none;
font-size: 20px;
padding: 20px;
text-align: center;
background-color: #206b0a;
color: #fff;
margin-bottom: 20px;
border-radius: 4px;
}
.filedeletedmessage {
display: none;
font-size: 15px;
padding: 5px;
text-align: center;
background-color: #206b0a;
color: #fff;
margin-bottom: 20px;
border-radius: 4px;
}
.resultmessage {
display: none;
font-size: 20px;
padding: 20px;
text-align: center;
background-color: #206b0a;
color: #fff;
margin-bottom: 20px;
border-radius: 4px;
}
.resultmessageuser {
display: none;
font-size: 20px;
padding: 20px;
text-align: center;
background-color: #206b0a;
color: #fff;
margin-bottom: 20px;
border-radius: 4px;
}
.deleteduser {
display: none;
font-size: 20px;
padding: 20px;
text-align: center;
background-color: #206b0a;
color: #fff;
margin-bottom: 20px;
border-radius: 4px;
}
.manualmessage {
display: none;
font-size: 20px;
padding: 20px;
text-align: center;
background-color: #206b0a;
color: #fff;
margin-bottom: 20px;
border-radius: 4px;
}
.resultmessageuseradded {
display: none;
font-size: 20px;
padding: 20px;
text-align: center;
background-color: #206b0a;
color: #fff;
margin-bottom: 20px;
border-radius: 4px;
}
.editcontentmessage {
display: none;
font-size: 20px;
padding: 20px;
text-align: center;
background-color: #206b0a;
color: #fff;
margin-bottom: 20px;
border-radius: 4px;
}
.fs-upload-input {
background-color: #10355e;
color: #fff;
border-radius: 3px;
padding: 20px;
}
.fs-upload-target {
padding-top: calc(.375rem + 1px);
padding-bottom: calc(.375rem + 1px);
margin-bottom: 0;
font-size: inherit;
line-height: 1.5;
float: left;
font-weight: 500;
}
.categorylist {
margin-bottom: 20px;
padding-left: 0px;
}
.sortwrap input {
display: inline-block !important;
width: 85% !important;
}
.sortwrap {
position: inherit !important;
}
.catinput {
margin-top: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.dragndrop {
font-size: 34px;
color: #10355e;
cursor: move;
border: 1px solid #ced4da;
border-radius: 3px;
top: 7px;
position: relative;
}
.ui-state-highlight {
width: 100%;
height: 40px;
border: 1px solid #113c69;
width: 300px;
}
.wrapper {
clear: both;
!important;
}
.inspectiebutton {
margin-top: 20px;
}
.removebutton {
margin-top: 18px;
margin-left: -90px;
}
.questionbutton {
margin-left: 20px;
margin-bottom: 5px;
}
.questioninput {
margin-left: 20px;
margin-bottom: 5px;
}
.removequestion {
margin-top: 10px;
}
.categorylist li {
list-style: none;
list-style-position: inside;
}
.categorylist li input {
font-weight: 500;
}
.questionlist li input {
font-weight: normal;
}
.questionlist li {
margin-top: 10px;
margin-left: -10px;
}
#loginresult {
background-color: #dc0b0b;
color: #fff;
padding: 20px;
border-radius: 4px;
font-size: 20px;
display: none;
}
.dropdown-content {
display: none;
}
.dropdown-show {
display: block !important;
padding: 4px 10px !important;
z-index: 1;
}
/* Einde dropdown menu */
.menuicon {
font-weight: bold;
font-size: 20px;
cursor: pointer;
}
.backlink {
color: #fff;
}
.addcontent {
display: none;
}
.backlink:hover {
color: #fff;
}
.personeel {
font-size: 90px;
}
.versions {
display: none;
}
.green {
color: #55af11 !important;
}
.red {
color: #c31111 !important;
}
.versionlist {
list-style-type: none;
list-style-position: inside;
padding-left: 0px;
}
.versionlist li {
margin-bottom: 10px;
}
.versionlist i {
font-size: 25px;
color: #10355e;
cursor: pointer;
}
.mtop-20 {
margin-top: 20px;
}
.companylink {
color: #0e3158;
text-decoration: underline;
font-weight: bold;
}
.manualtitle {
float: left;
}
.editmanual {
float: right;
font-size: 25px;
color: #113c69;
}
.wysiwyg {
clear: both;
}
.unselectable {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.menuliststyle {
list-style-type: none;
padding: 0px;
}
.menuliststyle a {
color: #10355e;
font-size: 15px;
margin-bottom: 5px;
}
.textcenter {
text-align: center;
}
.logoheader {
padding-top: 10px;
padding-bottom: 10px;
max-width: 200px;
}
.underlinelink {
text-decoration: underline;
color: #10355e;
}
.frontpageicon {
color: #10355e;
font-size: 18px;
}
.cover {
object-fit: cover;
}
.pbottom-0 {
padding-bottom: 0px !important;
}
.ptop-0 {
padding-top: 0px !important;
}
.chapter {}
.font-10 {
font-size: 10px;
}
.h45 {
height: 45px;
}
.mtop10 {
margin-top: 8% !important;
}
.font-12 {
font-size: 12px;
}
.tabheight-100 {
height: 100px;
}
.col-xl-custom {
flex: 0 0 20%;
max-width: 20%;
}
.dashicon {
text-align: center;
padding: 5px;
font-size: 40px;
color: #113c69;
}
.tabheight {
height: 120px;
}
.greydark {
color: #272727;
}
.padding-0 {
padding: 0px !important;
}
.shadowhover {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
transition: box-shadow 0.1s ease-in-out;
}
.shadowhover:hover {
box-shadow: 0 5px 50px 3px rgba(0, 0, 0, 0.5);
display: inherit;
}
.bigheader {
font-size: 20px !important;
margin-bottom: 20px !important;
}
.btnadd {
color: #fff;
background-color: #10355e;
border-color: #10355e;
margin-bottom: 20px;
}
.bgblue {
background: radial-gradient(at 50% -20%, #1967a9, #0a1832) fixed !important;
}
.btnadd:hover {
color: #fff;
background-color: #051d38;
border-color: #051d38;
margin-bottom: 20px;
}
.actionbuttons {
text-align: center;
}
.actionbuttons i {
color: #0e3158;
font-size: 25px;
}
.normblue {
color: #10355e;
}
.btn-blue {
background-color: #10355e !important;
border: 1px solid #10355e !important;
}
.filestyle {
background-color: #10355e;
}
.padding-025 {
padding: 0.25rem !important;
}
.editwindowadmin {
display: none;
}
.margininput {
margin-bottom: 20px;
}
.activebutton {
background-color: #10355e;
}
.activebutton i {
color: #fff;
}
.activebutton h4 {
color: #fff;
}
.editcontent {
float: right;
}
.editcontent i {
font-size: 30px;
color: #10355e;
cursor: pointer;
}
.table {
width: 100% !important;
}
.nav-pills .nav-item.show .nav-link,
.nav-pills .nav-link.active {
background-color: #10355e !important;
}
.fullwidth {
width: 100%;
}
.font-15 {
font-size: 15px;
}
/* .h60{
height: 60px;
} */
#media only screen and (max-width: 800px) {
.menuliststyle {
list-style-type: none;
padding: 0px;
max-width: 90%;
}
.btnadd {
color: #fff;
background-color: #10355e;
border-color: #10355e;
margin-bottom: 20px;
font-size: 15px !important;
display: block !important;
margin: 0 auto;
margin-bottom: 20px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<span id="sortablecats" class="ui-sortable">
<div>
<label class="categorytitle ui-sortable-handle" style="">jjjj</label>
<div class="row ui-sortable-handle" id="questionrow">
<div class="col-md-8">
<p class="questionclass">hhhh</p>
</div>
<div class="col-md-4">
<div class="container text-right">
<input type="radio" name="questionlist[jjjj][hhhh]" id="radio-1" value="ok" required="">
<label class="radiotoggle" for="radio-1"><span class="radio">Ok</span></label>
<input type="radio" name="questionlist[jjjj][hhhh]" id="radio-2" value="fout" checked="">
<label class="radiotoggle" for="radio-2"><span class="radio">Fout</span></label>
<input type="radio" name="questionlist[jjjj][hhhh]" id="radio-3" value="nvt">
<label class="radiotoggle" for="radio-3"><span class="radio">N.v.t</span></label>
</div>
</div>
<div class="col-md-8">
<p class="questionclass">jjj</p>
</div>
<div class="col-md-4">
<div class="container text-right">
<input type="radio" name="questionlist[jjjj][jjj]" id="radio-4" value="ok" required="" checked="">
<label class="radiotoggle" for="radio-4"><span class="radio">Ok</span></label>
<input type="radio" name="questionlist[jjjj][jjj]" id="radio-5" value="fout">
<label class="radiotoggle" for="radio-5"><span class="radio">Fout</span></label>
<input type="radio" name="questionlist[jjjj][jjj]" id="radio-6" value="nvt">
<label class="radiotoggle" for="radio-6"><span class="radio">N.v.t</span></label>
</div>
</div>
</div>
</div>
<div>
<label class="categorytitle ui-sortable-handle" style="">Testt</label>
<div class="row ui-sortable-handle" id="questionrow">
<div class="col-md-8">
<p class="questionclass">test</p>
</div>
<div class="col-md-4">
<div class="container text-right">
<input type="radio" name="questionlist[Testt][test]" id="radio-7" value="ok" required="">
<label class="radiotoggle" for="radio-7"><span class="radio">Ok</span></label>
<input type="radio" name="questionlist[Testt][test]" id="radio-8" value="fout" checked="">
<label class="radiotoggle" for="radio-8"><span class="radio">Fout</span></label>
<input type="radio" name="questionlist[Testt][test]" id="radio-9" value="nvt">
<label class="radiotoggle" for="radio-9"><span class="radio">N.v.t</span></label>
</div>
</div>
</div>
</div>
</span>