JSFiddle - React, Tailwind, and code Playground

by yassinezerguine

HTML

<body>

	<form name="formmodelplus">

		<header>
		 <a href="http://sample-env.py4kpfcsxt.eu-central-1.elasticbeanstalk.com/app/aboutus" id="hrefaboutus" data-i18n="senditmenu2button0">About us</a>
		 <a href="http://sample-env.py4kpfcsxt.eu-central-1.elasticbeanstalk.com/app/faqs" id="hrefquestions" data-i18n="senditmenu2button0">Questions</a>
		 <a href="http://sample-env.py4kpfcsxt.eu-central-1.elasticbeanstalk.com/app/plus" id="hrefsenditplus" >Sendit Plus</a>
		 <a href="http://sample-env.py4kpfcsxt.eu-central-1.elasticbeanstalk.com/app/mobile" id="hrefmobile" data-i18n="senditmenu2button0">Mobile</a>
		 <a href="http://sample-env.py4kpfcsxt.eu-central-1.elasticbeanstalk.com/app/blog" id="hrefblog" data-i18n="senditmenu2button0">Blog</a>
		</header>
		<section id="imgplus" >
		<img class="imgbigplus" id ="imgbigplus" data-i18n="[alt]img" src="/resources/images/img1.png" alt="Oops! Something wrong with your connection">
		<input type="button" value="Get Plus" data-i18n="[value]senditplus2button" style="position: relative; top: 0px; left: 80px;" id="senditplus2button"  onclick="gotothebottomofpagewhereformofplusaccount" >
		</section>
		<section id="sec1">
		<img class="imgplus1" id ="imgplus1" data-i18n="[alt]img" src="/resources/images/img1.png" alt="Oops! Something wrong with your connection">
		<label id="labelplus1_1" data-i18n="[html]labelplus1_1">Get more out of <br> Sendit with Plus</label>
		<label id="labelplus1_2" data-i18n="[html]labelplus1_2">For the people who love Sendit, and <br> asked us for more. Whether it's for business <br> or personal use. We created it for you. Plus is <br> the ultimate Sendit upgrade.</label>
		</section>
		<section id="sec2">
		<img class="imgplus2" id ="imgplus2" data-i18n="[alt]img" src="/resources/images/img1.png" alt="Oops! Something wrong with your connection">
		<label id="labelplus2_1" data-i18n="labelplus2_1">20GB sent</label>
		<label id="labelplus2_2" data-i18n="[html]labelplus2_2">The ability to send entire...

JavaScript

$("input:checkbox").not( "#inputplus7_9" ).on('click', function() {
  // in the handler, 'this' refers to the box clicked on
  var $box = $(this);
  if ($box.is(":checked")) {
    // the name of the box is retrieved using the .attr() method
    // as it is assumed and expected to be immutable
    var group = "input:checkbox[name='" + $box.attr("name") + "']";
    // the checked state of the group/box on the other hand will change
    // and the current value is retrieved using .prop() method
    $(group).prop("checked", false);
    $box.prop("checked", true);
  } else {
    $box.prop("checked", true);
  }
});

var pass_check= false;
$(function() {
$('#inputplus7_3').on('keyup', function () {
    if ($(this).val() == $('#inputplus7_2').val()) {
        $('#message').html('matching').css('color', 'green');
        pass_check = true
    } else {
    pass_check = false;
    $('#message').html('not matching').css('color', 'red');
    }
});

    $("#sec7form").validate({
    debug: true
    }); 	
});