JSFiddle - React, Tailwind, and code Playground

by Nisarg Shah

HTML

<input type="text" data-bind="textInput: test" /> 
<span data-bind="text: test"></span>

<div id="longInfoWindow">
  <div id="longInfo_goBack"><span class="fa fa-arrow-left"></span> Go Back</div>
  <div id="location_mainInfo">
    <h1 id="location_title" data-bind="text: test">Title</h1>
    <h2 id="location_address" data-bind="text: toClicked().address">Address</h2>
    <h6 class="location_latlng">LAT: <span data-bind="text: toClicked().lat">LATITUDE</span></h6>
    <h6 class="location_latlng">LNG: <span data-bind="text: toClicked().lng">LONGITUDE</span></h6>
    <p id="location_description" data-bind="text: toClicked().content">
      Empty
    </p>
  </div>
</div>

JavaScript

var viewModel = function() {
  // Nav open and close via knockoutjs
  var self = this;
  
  self.test =  ko.observable('text');

  self.userQuery = ko.observable('');
  self.toClicked = ko.observable({});
  
  self.markers = ko.observableArray([
    { title: 'Eagle River Airport', lat: 45.934099, lng: -89.261834, placeID: 'ChIJdSZITVA2VE0RDqqRxn-Kjgw', content: 'This is the Eagle River Airport. Visit us for fly-ins!' }
  ]);

  self.logClick = function(clicked) {
    // var toClicked = ko.observable({});
    self.toClicked().title = clicked[0].title;
    self.toClicked().lat = clicked[0].lat;
    self.toClicked().lng = clicked[0].lng;
    self.toClicked().placeID = clicked[0].placeID;
    self.toClicked().address = clicked[0].address;
    self.toClicked().content = clicked[0].content;
    self.toClicked.valueHasMutated();
    return self.toClicked();
  };
};

// at the end of the document...
var vm = new viewModel();
ko.applyBindings(vm);
var markers = vm.markers();
vm.logClick(markers);