leasure.js

var socket = io.connect("http://localhost:500");

// when page is opened it makes a call to the db to retrive all leasure bikes etc.

socket.emit("retrive_leasure", {"message":"retrive_leasure"});

// getting bikes back from the database
socket.on("leasure_bikes_from_db", function(jData){
  // putting all of the leasure bikes into a dynamically allocated div's
  // console.log(jData.length);
  for(let i = 0 ; i < jData.length; i++){
    var extension = "LeasureBike";
    var name = "leasureBikes";
    $("#leasureBikesDiv").append("<h1 name="+name+" id="+jData[i].modelName+extension+" >"+jData[i].modelName+"</h1>");
  }
});

// displaying a certain bike when clicked on
$(function() {
$(document).on("click", 'h1', function() {
  // using function and then 'on' instead of 'click' cause 'click' only works for
  // elements written in the original html doc not the ones dynamically added
  var elementId = document.getElementsByName("leasureBikes").id;
  console.log(elementId);
  });
});