JSFiddle - React, Tailwind, and code Playground

by chridam

HTML

<div class="container">
    
    <div class="page-header">
        <h1 class="pull-left">
            
                <a href="http://localhost:8000/bigevents/2017/">Demo Conference 2017</a>
                <small>Sept. 4, 2017 –
                    Sept. 6, 2017</small>
            
        </h1>
        <div class="pull-right loginbox">
            
        </div>
        <div class="clearfix"></div>
    </div>
    
    
    <h2>Checkout</h2>
    <p>Before we continue, we need you to answer some questions, okay?</p>
    <form class="form-horizontal" method="post">
        <input name="csrfmiddlewaretoken" value="q5MGF6nFCmFICnMEEmWwaagGSmDlilZRcTeu7cQ363BqSltCTQ2W0zXiVgR8spj4" type="hidden">
        <div class="panel-group" id="questions_group">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" href="#contact">
                            <strong>Contact information</strong>
                        </a>
                    </h4>
                </div>
                <div id="contact" class="panel-collapse in collapse">
                    <div class="panel-body">
                        <div class="form-group"><label class="col-md-3 control-label" for="id_email">E-mail</label><div class="col-md-9"><input class="form-control" id="id_email" name="email" placeholder="E-mail" title="" value="[email protected]" required="" type="email"></div></div>
                    </div>
                </div>
            </div>
            
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" href="#invoice">
                                <strong>Invoice information</strong>
                                
                                    (optional)
                                
          ...

JavaScript

/*global $ */

$(function () {
    "use strict"; 

    
    // Copy answers
    $(".js-copy-answers").change(function() {
        var idx = $(this).data('id');
        console.log(idx);
        if ($(".js-copy-answers:checked").length > 0) {
            bind_groups(idx);
        } else {
            unbind_groups(idx);
        }
    })
});

function display_copy() {
    var elements = $("input").filter(function(){
        return this.id.match(/^id_(\d+)/);
    });    
    var shouldElementBeVisible = (elements.length > 2);    
    $("#cp_copy").toggle(!!shouldElementBeVisible);   
}

function bind_groups(idx) {    
    var elements = $('*[data-idx="'+idx+'"] input, *[data-idx="'+idx+'"] select, *[data-idx="'+idx+'"] textarea');
    var firstAnswers = $('*[data-idx="0"] input, *[data-idx="0"] select, *[data-idx="0"] textarea');
    console.log(idx);
    console.log(elements);
    elements.each(function(index){
        var input = $(this);
        switch (input.prev().prop('tagName')) {
            case "textarea":            
                input.val(firstAnswers.eq(index).val());
                break;
            case "select":
                input.val(firstAnswers.eq(index).find(":selected").val()).change();
                break;
            case "input":
                switch (input.attr('type')) {
                    case "text":
                    case "number":
                        input.val(firstAnswers.eq(index).val());
                        break;
                    case "checkbox":
                    case "radio":
                        input.prop("checked", firstAnswers.eq(index).prop("checked"));
                        break;
                    default:
                        input.val(firstAnswers.eq(index).val());
                } 
                break;
            default:
                input.val(firstAnswers.eq(index).val());
        } 
    });
}

function unbind_groups(idx) {   
    var elements = $('*[data-idx="'+idx+'"]...