<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>List of people</h1>
    <a href="#" class="btn btn-green" id="addRowBtn">Add new person</a>
    <a href="#" class="btn btn-blue" id="lnkFile" download="CsvFile.csv">Download CSV file</a>
    <table id="inputsTable">
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
          <th>Surename</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr class="csv-row">
          <td><input class="input-id" readonly value="0" ></td>
          <td><input class="input-name" value="Estelle" ></td>
          <td><input class="input-surename" value="Wilkerson" ></td>
          <td><input class="input-email" value="Estelle.Wilkerson@email.com" ></td>
        </tr>
        <tr class="csv-row">
          <td><input class="input-id" readonly value="1" ></td>
          <td><input class="input-name" value="John" ></td>
          <td><input class="input-surename" value="Sanchez" ></td>
          <td><input class="input-email" value="John.Sanchez@email.com" ></td>
        </tr>
        <tr class="csv-row">
          <td><input class="input-id" readonly value="2" ></td>
          <td><input class="input-name" value="Allen" ></td>
          <td><input class="input-surename" value="Hunter" ></td>
          <td><input class="input-email" value="Allen.Hunter@email.com" ></td>
        </tr>
        <tr class="csv-row">
          <td><input class="input-id" readonly value="3" ></td>
          <td><input class="input-name" value="Gwen" ></td>
          <td><input class="input-surename" value="Cox" ></td>
          <td><input class="input-email" value="Gwen.Cox@email.com" ></td>
        </tr>
        <tr class="csv-row">
          <td><input class="input-id" readonly value="4" ></td>
          <td><input class="input-name" value="Lynch" ></td>
          <td><input class="input-surename" value="Conner" ></td>
          <td><input class="input-email" value="Lynch.Conner@email.com" ></td>
        </tr>
        <tr class="csv-row">
          <td><input class="input-id" readonly value="5" ></td>
          <td><input class="input-name" value="Billie" ></td>
          <td><input class="input-surename" value="Cherry" ></td>
          <td><input class="input-email" value="Billie.Cherry@email.com" ></td>
        </tr>
        <tr class="csv-row">
          <td><input class="input-id" readonly value="6" ></td>
          <td><input class="input-name" value="Jackson" ></td>
          <td><input class="input-surename" value="Oneal" ></td>
          <td><input class="input-email" value="Jackson.Oneal@email.com" ></td>
        </tr>
        <tr class="csv-row">
          <td><input class="input-id" readonly value="7" ></td>
          <td><input class="input-name" value="Maryann" ></td>
          <td><input class="input-surename" value="Davenport" ></td>
          <td><input class="input-email" value="Maryann.Davenport@email.com" ></td>
        </tr>
      </tbody>
        
    </table>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>
(function($) {
  var ieOldFn = null;
  var getRandomNumber = function() {
    return Math.floor(Math.random() * 100);
  };
  var addRowClick = function() {
    $("table").find("tr:last").clone().appendTo($("table"));
    $("table").find("tr:last").find("input").each(function(ind, el) {
      if (ind === 0) {
        var id = parseInt($(el).val());
        $(el).val(id + 1);
      } else {
        $(el).val('');
      }
    });
    updateCsvLink();
  };

  var updateCsvLink = function() {
    var csvString = "Id,Name,Surename,Email";
    $(".csv-row").each(function() {
      csvString += "\n";
      var separator = "";
      $(this).find("input").each(function() {
        csvString += separator + $(this).val();
        separator = ",";
      });

    });
    var fileName = 'peopleCsvFile.csv';
    console.log(csvString);
    window.URL = window.URL || window.webkiURL;
    var blobObj = new Blob([csvString]);
    var lnkElement = document.getElementById('lnkFile');

    if (typeof window.navigator.msSaveOrOpenBlob != "undefined") {
      var clickFn = function() {
        window.navigator.msSaveOrOpenBlob(blobObj, fileName);
      };
      if(ieOldFn !== null){
        lnkElement.removeEventListener('click', ieOldFn, true);
      }
      lnkElement.addEventListener('click', clickFn, true);
      ieOldFn = clickFn;
    } else {
      var fileUrl = window.URL.createObjectURL(blobObj);
      lnkElement.setAttribute('href', fileUrl);
      lnkElement.setAttribute('download', fileName);
    }
  };


  $('#inputsTable').on('change', 'input', updateCsvLink);
  $('#addRowBtn').on('click', addRowClick);

  updateCsvLink();
})(jQuery);
/* Styles go here */

.btn {
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  font-family: Arial;
  color: #ffffff;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn:hover {

  text-decoration: none;
}

.btn-blue {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
}

.btn-blue:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
}

.btn-green {
  background: #75c987;
  background-image: -webkit-linear-gradient(top, #75c987, #468054);
  background-image: -moz-linear-gradient(top, #75c987, #468054);
  background-image: -ms-linear-gradient(top, #75c987, #468054);
  background-image: -o-linear-gradient(top, #75c987, #468054);
  background-image: linear-gradient(to bottom, #75c987, #468054);
}

.btn-green:hover {
  background: #75c987;
  background-image: -webkit-linear-gradient(top, #75c987, #75c987);
  background-image: -moz-linear-gradient(top, #75c987, #75c987);
  background-image: -ms-linear-gradient(top, #75c987, #75c987);
  background-image: -o-linear-gradient(top, #75c987, #75c987);
  background-image: linear-gradient(to bottom, #75c987, #75c987);
}

#inputsTable{
  margin:20px 0;
}
.input-id{
  width:20px;
}
.input-name{
  width:100px;
}
.input-surename{
  width:100px;
}
.input-email{
  width:200px;
}