Multiple Text Box collaboration using google-drive-realtime-api - google-drive-realtime-api

Question

I am trying to collaborate using multiple text boxes. For example, when textbox1 get changed in one Chrome browser window, textbox1 in another Chrome browser window must also get changed. When textbox2 get changed in one Chrome browser window, textbox2 in another Chrome browser window must also get changed. I have modified the existing code provided at https://developers.google.com/drive/realtime/realtime-quickstart
Here is my changed code...
Index.html
<!-- Text areas that will be used as our collaborative controls. -->
<input id="editor1" style="width:400px" placeholder="Type some text here..." autofocus><br />
<input id="editor2" style="width:400px" placeholder="Type some text here...">
function initializeModel(model) {
var string1 = model.createString('Hello Realtime World1!');
model.getRoot().set('text', string1);
var string2 = model.createString('Hello Realtime World2!');
model.getRoot().set('text', string2);
}
function onFileLoaded(doc) {
var string1 = doc.getModel().getRoot().get('text');
var string2 = doc.getModel().getRoot().get('text');
// Keeping one box updated with a String binder.
var textArea1 = document.getElementById('editor1');
gapi.drive.realtime.databinding.bindString(string1, textArea1);
var textArea2 = document.getElementById('editor2');
gapi.drive.realtime.databinding.bindString(string2, textArea2);
....
When I tried to run this application and change the textbox1, textbox2 also get changed and in the other windows, both the textboxes get changed with the same text.
Please advise...thanks.

Answer 1

In initializeModel you are creating two collaborativeStrings, but assigning them both to the same key in the root "text".
Later on you are getting the same string "text" out of the root for both string1 and string2:
var string1 = doc.getModel().getRoot().get('text');
var string2 = doc.getModel().getRoot().get('text');
You need to change one of those 'text' in both places to something else.