JSFiddle - React, Tailwind, and code Playground

by Manoj kumar Lakshman

HTML

<body>
    <div class="container">
        <section class="round">
            <form accept-charset="UTF-8" action="/student_groups" class="new_student_group" id="new_student_group" method="post">
                <div style="margin:0;padding:0;display:inline">
                    <input name="utf8" type="hidden" value="&#x2713;" />
                    <input name="authenticity_token" type="hidden" value="u/DbVbgMKoT6kWPBKsD0sVNBLVRpFY87E5nZQWK+K9o=" />
                </div>
                <p>
                    <!-- http://stackoverflow.com/questions/10038993/rails-and-forms-drop-down-with-range-of-numbers-and-unlimited --> <span class="form_field"><input id="student_group_name" name="student_group[name]" placeholder="The name of this group" size="30" type="text" /></span>
is a/an
                    <select id="student_group_type_of_group" name="student_group[type_of_group]">
                        <option value="">select a group type</option>
                        <option value="young learners class (0-6)">young learners class (0-6)</option>
                        <option value="primary class (7-12)">primary class (7-12)</option>
                        <option value="secondary class (13-17)">secondary class (13-17)</option>
                        <option value="adult class (18+)">adult class (18+)</option>
                        <option value="children&#x27;s sport team">children&#x27;s sport team</option>
                        <option value="adult&#x27;s sport team">adult&#x27;s sport team</option>
                    </select>and there are <span id="nos" class="dropdown"><select id="student_group_number_of_students" name="student_group[number_of_students]"><option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option...

JavaScript

var row_i = 0;

function emptyRow() {
    row_i++;
    this.obj = $("<tr></tr>");
    this.obj.append('<td><input type="text" size="5" value="' + row_i + '"/></td>');
    this.obj.append('<td><input type="text" size="5" name="Student name' + row_i + '" id="ss_name' + row_i + '"" /></td>');
    this.obj.append('<td><input type="text" size="5" name="Gender' + row_i + '" id="ss_gender' + row_i + '" class="form_field""/></td>');
}

function refresh(new_count) {
    //how many students we have drawn ?
    console.log("New count= " + new_count);
   // alert(new_count);
    if (new_count > 0) {
        $('#nos_header').show();
    } else {
        $('#nos_header').hide();
    }
    var old_count = parseInt($('tbody').children().length);
    console.log("Old count= " + old_count);
    //the difference, we need to add or remove ?
    var rows_difference = parseInt(new_count) - old_count;
    console.log("Rows diff= " + rows_difference);
    //if we have rows to add
    if (rows_difference > 0) {
        for (var i = 0; i < rows_difference+1; i++)
        $('tbody').append((new emptyRow()).obj);
    } else if (rows_difference < 0) //we need to remove rows ..
    {
        var index_start = old_count + rows_difference + 1;
        console.log("Index start= " + index_start);
        $('tr:gt(' + index_start + ')').remove();
        row_i += rows_difference;
    }
}

$(document).ready(function () {
    //hide table by default
    $('#nos_header').hide ();
  
    $('#nos').change(function () {
        var opt=$('#nos option:selected');
          //alert(opt.text());
        refresh(opt.text());
    })
});