JSFiddle - React, Tailwind, and code Playground

by fmdataweb

HTML

<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-typeahead.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/docs.css">
<form class="well" action="index.php" method="post">
<div>
    <div class="span8"><br>
      <table id="activities" class="table table-bordered table-striped">
        <thead>
          <tr>
            <th>State</th>
            <th>Country</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr class="activity_row">
            <td>
                <input id="txtState"  type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["New South Wales","Queensland","Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]' value="" /></td>
         <td><div class="controls">
              <select id="Country">
                <option></option>
                <option>Australia</option>
                <option>USA</option>
              </select>
            </div></td>
              <td id="button2" class="btn">New Row</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>        <button type="submit" class="btn">Submit</button>
              </form></div>

JavaScript

// IE fix for array.indexOf
if(!Array.prototype.indexOf) {
    Array.prototype.indexOf = function(needle) {
        var i;
        for(i = 0; i < this.length; i++) {
            if(this[i] === needle) {
                return i;
            }
        }
        return -1;
    };
}


var txtState = document.getElementById('txtState');

var ddlCntry = document.getElementById('Country');

var countries = [{
    name: 'USA',
    states: ['Alabama', 'Alaska']},
{
    name: 'Australia',
    states: ['New South Wales', 'Queensland']}];

txtState.onblur = function() {
    var state = txtState.value;
    var i;
    for (i = 0; i < countries .length; i++) {
        if (countries [i].states.indexOf(state) > -1) {
            var j;
            for(j = 0; j < ddlCntry.options.length; j++){
                if (ddlCntry.options[j].innerHTML == countries [i].name){
ddlCntry.selectedIndex = j;
                    break;
                }                    
            }
        break;
        }
    }
};


  // trigger event when button is clicked
  $("#button2").click(function()
  {
    // add new row to table using addTableRow function
    addTableRow($(this),$("#activities"));
 
    // prevent button redirecting to new page
    return false;
  });
   
  // function to add a new row to a table by cloning the last row and
  // incrementing the name and id values by 1 to make them unique
  function addTableRow(btn,table)
  {
    // clone the last row in the table
  //  var $tr = $(table).find("tbody tr:last").clone();
 var $tr = btn.closest($("tr")).clone(true);
    // get the name attribute for the input and select fields
    $tr.find("input,select").attr("name", function()
    {
      // break the field name and it's number into two parts
      var parts = this.id.match(/(\D+)(\d+)$/);
 
      // create a unique name for the new field by incrementing
      // the number for the previous field by 1
      return parts[1] + ++parts[2];
    // repeat for id attributes
   ...