JSFiddle - React, Tailwind, and code Playground

by Bahman ParsaManesh

HTML

<html>

<head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
    <!-- Compiled and minified JavaScript -->
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col s20 m9 l10">
                <div class="content-wrapper">
                    <div class="input-field col s12">
                        <form method="POST" action="http://localhost/evaluaciones/public/evaluaciones" accept-charset="UTF-8">
                            <input name="_token" type="hidden" value="VaoolzO4hQUmyxwdRYjn1fGyOCKJ49OGTqqT33WG">
                            <div class="card-panel hoverable">
                                <label>Selecciona uno, varios o todas las opciones.</label>
                                <br>
                                <select multiple class="select_todo" id="select_seasons">
                                    <optgroup label="Primero Piso">
                                        <option id="1" value="1">Clínicas Odontologicas</option>
                                        <option id="2" value="2">Recepción Odontología</option>
                                        <option id="3" value="3">Tesorería</option>
                                        <option id="4" value="4">Pastoral Universitaria</option>
                                        <optgroup label="Segundo Piso">
                                            <option id="5" value="5">Laboratorio de Biología</option>
                                            <option id="6" value="6">Bienestar Universitario</option>
                                            <option id="7"...

JavaScript

$(document).ready(function () {
    $('select').formSelect();
    $('select.select_todo').siblings('ul').prepend('<li id=sm_select_todo><span>Seleccionar Todo</span></li>');
    $('li#sm_select_todo').on('click', function () {
        var jq_elem = $(this),
            jq_elem_span = jq_elem.find('span'),
            select_todo = jq_elem_span.text() == 'Seleccionar Todo',
            poner_texto = select_todo ? 'Quitar Selección' : 'Seleccionar Todo';
        jq_elem_span.text(poner_texto);
        jq_elem.siblings('li').filter(function () {
            return $(this).find('input').prop('checked') != select_todo;
        }).click();
    });

    $('.select_todo ').change(function () {

        if ($(":selected", this).length > 0) {

            var count = $(":selected", this).length;
            var htmlToInsert = "";
            for (var i = 0; i <= count; i++) {
                htmlToInsert = '<div class = "card-panel hoverable" id="departament' + i + '">' + '<label>Calificación:</label><br>' + '<form action="#">'

                + '<label>' + ' <input class="with-gap" id="uno" name="group1" type="radio" value="1" checked />' + '<span>1</span>' + ' </label>'

                + '<label>' + '<input class="with-gap" id="dos"  name="group1" type="radio" value="2"/>' + '<span>2</span>' + '</label>'

                + '<label>' + ' <input class="with-gap" id="tres"  name="group1" type="radio" value="3" />' + ' <span>3</span>' + '</label>'

                + ' <label>' + ' <input class="with-gap"  id="cuatro"  name="group1" type="radio" value="4"/>' + '   <span>4</span>' + ' </label>'

                + ' <label>' + ' <input class="with-gap"  id="cinco"  name="group1" type="radio" value="5"/>' + '   <span>4</span>' + ' </label>'

                + '</form>'

                + '<div class="row">' + ' <form class="col s12">' + ' <div class="row">' + '   <div class="input-field col s12">' + '   <i class="material-icons prefix">mode_edit</i>' + '   <textarea...