JSFiddle - React, Tailwind, and code Playground

by chridam

HTML

<div class="panel panel-default">
  <div class="panel-heading">
    <h4 class="panel-title">
                            <a data-toggle="collapse" href="#cp9">
                                <strong>Ticket</strong>
                                
                            </a>
                                                       
                        </h4>
  </div>
  <div id="cp9" class="panel-collapse in collapse">
    <div class="panel-body" data-idx="0">
      <div class="form-group">
        <label class="col-md-3 control-label" for="id_9-attendee_name">Attendee name</label>
        <div class="col-md-9">
          <input class="form-control" id="id_9-attendee_name" maxlength="255" name="9-attendee_name" placeholder="Attendee name" title="" value="hde,slal" type="text">
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-3 control-label" for="id_9-question_1">Age</label>
        <div class="col-md-9">
          <input class="form-control" id="id_9-question_1" min="0.00" name="9-question_1" placeholder="Age" step="any" title="" value="45" type="number">
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-3 control-label" for="id_11-question_1">Checkbox</label>
        <div class="col-md-9">
          <input data-id="1" name="copy" class="form-control" id="id_9-question_2" type="checkbox"> Question 1
        </div>
      </div>
    </div>
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h4 class="panel-title">
                            <a data-toggle="collapse" href="#cp10">
                                <strong>Ticket</strong>
                                
                            </a>
                            
                                <span class="text-right pull-right">
                                     <input data-id="1" name="copy" class="js-copy-answers" id="copy_answers_1" type="button" value="Copy answers from...

JavaScript

$(function () {
// Copy answers
    $(".js-copy-answers").click(function(e) {
    		e.preventDefault();
        var idx = $(this).data('id');
        bind_groups(idx);
    });
});

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');
    elements.each(function(index){
        var input = $(this),
        		tagName = input.prop('tagName').toLowerCase(),
        		attr = input.attr('type');
            
        switch (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());
                        console.log(attr + " val = "+ firstAnswers.eq(index).val());
                        break;
                    case "checkbox":
                    case "radio":
                        //input.prop("checked", firstAnswers.eq(index).prop("checked"));
                        console.log(attr + " val = "+ firstAnswers.eq(index).prop("checked"));
                        break;
                    default:
                    		console.log(attr + " val = " + firstAnswers.eq(index).val());
                        input.val(firstAnswers.eq(index).val());
                } 
                break;
            default:
                input.val(firstAnswers.eq(index).val());
        } 
    });
}