JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="nl">
	<head>
		<meta charset=utf-8>
		<title>18inLeeuwarden.nl</title>
		 <script src="js/jquery-latest.min.js"></script>
		 <script src="js/scripts.js"></script>
		 <link rel="stylesheet" href="css/style.css">
		  <link rel="stylesheet" href="css/reset.css">
	</head>
	
<body>

<div id="checklist">

	<div id="procesbalk">
		<div id="geregeld">
			<p>geregeld</p>
		</div>
		<div id="niet_geregeld"><p>niet geregeld</p></div>
	</div>
	
	<div id="content_vragen">
		<div class="container_vragen">
			<p class="open_sub">&#x25BC; Heb je al je verplichtingen al geregeld?</p>
			<div class="antwoorden">
				<input id="ja" type="checkbox" value="ja" class="open_sub_ja"/><label for="ja">Ja</label>
				<input id="nee" type="checkbox" value="nee" class="open_sub_nee"/><label for="nee">Nee</label> 
				<div class="extra_info">?
					<div class="extra_info_popup">
						Hidden tekst
					</div>
				</div>
			</div>	

			<div class="submenu">
				<div>
					<p>Heb je DigiD?</p>
					<div class="antwoorden">
						<input id="ja" type="checkbox" value="ja" class="sub_antwoord ja"/><label for="ja">Ja</label>
						<input id="nee" type="checkbox" value="nee" class="sub_antwoord nee"/><label for="nee">Nee</label> 
						<div class="extra_info">?
							<div class="extra_info_popup">
								Hidden tekst
							</div>
						</div>
					</div>
				</div>
				
				<div>
					<p>Heb je DigiD?</p>
					<div class="antwoorden">
						<input id="ja" type="checkbox" value="ja" class="sub_antwoord ja"/><label for="ja">Ja</label>
						<input id="nee" type="checkbox" value="nee" class="sub_antwoord nee"/><label for="nee">Nee</label> 
						<div class="extra_info">?
							<div class="extra_info_popup">
								Hidden tekst
							</div>
						</div>
					</div>
				</div>
				
				<div>
					<p>Heb je DigiD?</p>
					<div class="antwoorden">
						<input id="ja" type="checkbox" value="ja" class="sub_antwoord ja"/><label for="ja">Ja</label>
						<input id="nee"...

CSS

body, html {
	  font-family:verdana;
	}
	input {
	  margin:0px 4px 0px 0px;
	  padding:0px;
	}
	#checklist {
	  float:left;
	  border:1px solid black;
	  width:585px;
	  position:relative;
	  height:auto;
	  background-position:bottom;
	  background-repeat:no-repeat;
	  background-position:0px 58px;
	}
	#procesbalk {
	  padding:10px 0px 10px 10px;
	  width:575px;
	  border-bottom:1px solid black;
	  float:left;
	}
	#procesbalk div {
	  text-align:center;
	  border:1px solid black;
	  padding:10px;
	  float:left;
	  width:260px;
	}
	#procesbalk div p {
	  float:left;
	  width:234px;
	  margin-bottom:10px;
	}
	#niet_geregeld .container_vragen {
	  float:left;
	  cursor:pointer;
	  margin-right:10px;
	  background-color:red;
	  height:20px;
	  width:0px;
	  padding-left:30px;
	}
	#geregeld .container_vragen {
	  float:left;
	  cursor:pointer;
	  margin-right:10px;
	  background-color:green;
	  height:20px;
	  width:0px;
	  padding-left:30px;
	}
	#content_left, #content_vragen, #content_right {
	  margin-left:30px;
	  font-size:13px;
	  float:left;
	  padding-bottom:15px;
	}
	.container_vragen {
	  margin-top:20px;
	  float:left;
	  width:515px;
	}
	.akkoord {
	  background-color: black;
	  color:white;
	  padding:0px 15px 15px 0px;
	  height:20px;
	  color: white;
	  width: 80%;
	  margin-right:10px;
	  text-align: right;
	  float:left;
	  margin-top:10px;
	  cursor:pointer;
	}
	.close_submenu {
	  margin-top: 10px;
	  padding: 12px 15px 15px 15px;
	  background-color: black;
	  color: white;
	  height: 8px;
	  width: 11px!important;
	  float: left;
	  cursor:pointer;
	}
	.close_okay {
	  background-color:black;
	  width:118px!important;
	  padding:20px;
	  position: absolute;
	}
	.submenu {
	  width:450px;
	  font-size:12px;
	  padding:15px 15px 15px 35px;
	  float:left;
	  margin:10px 10px 0px 0px;
	  border:1px solid black;
	}
	.extra_info {
	  float:right!important;
	  width:20px!important;
	}
	.antwoorden {
	  float:right!important;
	  width:110px!important;
	 ...

JavaScript

jQuery(document).ready(function () {

  function appendToContent_vragen() {
    $(this).closest('.container_vragen').fadeOut(400, function () {
      $(this).closest('.container_vragen').appendTo('#content_vragen');
      $(this).closest('.container_vragen').css({
        overflow: 'hidden',
        color: 'black'
      });
      $(this).closest('.container_vragen').fadeIn(400);
    });
  }

  $('#geregeld , #niet_geregeld').on('click', function () {
    $('.container_vragen', this).click(appendToContent_vragen);
  });

  //$('.container_vragen').on('click',appendToContent_vragen);

  $('.submenu').hide();
  $('.close_submenu').click(function () {
    $(this).parents('.container_vragen').find('.submenu').fadeOut(500);
  });

  $('.close_okay').hide()
  $('.close_submenu').hover(function () {
    $(this).find('.close_okay').fadeToggle(500);
  });

  $('.open_sub_ja , .open_sub_nee , .open_sub').click(function () {
    $(this).parents('.container_vragen').find('.submenu').fadeIn(500);
  });

  $('.open_sub_ja').click(function () {
    $(this).parents('.container_vragen').find('.ja').attr('checked', this.checked);
    $(this).parents('.container_vragen').find('.nee').removeAttr('checked');
  });

  $('.open_sub_nee').click(function () {
    $(this).parents('.container_vragen').find('.ja').removeAttr('checked');
    $(this).parents('.container_vragen').find('.nee').attr('checked', this.checked);
  });

  $('.ja , .open_sub_ja').click(function () {
    $(this).parents('.antwoorden').find('.ja').attr('checked', this.checked);
    $(this).parents('.antwoorden').find('.nee').removeAttr('checked');

    $group1 = $(this).parents('.submenu').find('.ja');
    if ($group1.filter(':not(:checked)').length === 0) {

      $(this).parents('.container_vragen').find('.open_sub_ja').attr('checked', this.checked);
      $(this).parents('.container_vragen').find('.open_sub_nee').removeAttr('checked');
    } else { /*do nothing */
    }
  });

  $('.ja').click(function () {
   ...