Fix regressions in MusicKeyboard widget

[daksh4469]

After #2849, the Music Keyboard widget has two regressions:

• The lower 8 notes from G4 to C4) in the column of the grid were unclickable.
  This is happening as the for loop (starting from line 1057 in the makeClickable function), the parameter this.layout.length is getting set to 5, after Multiple Bug Fixes and Enhancements to Music Keyboard #2849, instead of 12. Now, the error arises in the _keysLayout function where the notes are pushed in the layout array. So, sortedList is replaced by newList . Here,
  newList = fillChromaticGaps(sortedNotesList)
  Thus, newList contains all the 12 notes whereas sortedList contains only the first 5 notes.

• In case when multiple notes were selected in a column, the music would stop playing and not move any further.
  This regression arises as when multiple notes are selected, the playOne could not fetch the objId of the notes from selectedNotes . Now, this happens when the setNoteCell method is called in the setNotes function. In this setNoteCell method, when the note is being pushed in the selectedNotes array, objId should be assigned to that in the displayLayout (introduced in Multiple Bug Fixes and Enhancements to Music Keyboard #2849) array and not of the layout array.

Below is the video showing both these regressions:

mk.3.mp4

This patch fixes these regressions and the widget functions as expected.

mk.1.mp4

Please have a look at this @walterbender @meganindya and let me know if it has any issues.
Thanks.

[walterbender]

Is #2857 ready to review too? Are these compatible?

[daksh4469]

Is #2857 ready to review too? Are these compatible?

Yes, can you please check if #2857 is now working? @walterbender
It is working on my environment (Chrome and Firefox).

[daksh4469]

About compatibility, I might have to do a rebase once you review and approve those changes.