$this or $$this returns something else in F7

So i want to get the notification element clicked in a list of notifications

var notification = '<!--<a href="/'+ data.app_redirect_url +'/">-->'+
            '                                <div class="'+ status_class +' go-up-a-bit-20">'+
            '                                    <div class="row resizable">'+
            '                                        <div class="col-20">'+
            '                                            <i class="text-center fa fa-bell fa-3x black-text go-down-a-bit-20"></i>'+
            '                                        </div>'+
            '                                        <div class="col-70">'+
            '                                            <h4 class="text-size-15 text-left josefin-sans-light-font orange-text no-margin"> '+ data.notification_title +'</h4>'+
            '                                            <h4 class="text-size-10 text-left josefin-sans-light-font black-text"> '+ data.notification_message +' </h4>'+
            '                                            <span data-noti-redirect-url="'+ data.page_path +'" data-noti-id="'+ data.id +'" onclick="app.methods.mechNotificationNav()" id="view-all-btn" class="sm-grey-box white-text text-size-10 noti-link">'+
            '                                                <i class="fa fa-link"></i> View '+
            '                                            </span>'+
            '                                        </div>'+
            '                                        <div class="col-10">'+
            '                                            <i onclick="app.methods.mechDelNotification()" data-delete-id="'+ data.id +'" class="fa fa-trash float-right delete-noti grey-text-color"></i>'+
            '                                        </div>'+
            '                                    </div>'+
            '                                </div>'+
            '                            <!--</a>-->';

FUNCTION:

 mechNotificationNav: function(e){
        
        id = $$(this).data("noti-id");

        console.log( $$(this) );
 }

ERROR
1. t {eventsParents: Array(0), eventsListeners: {…}, params: {…}, id: "io.framework7.mobilemech", name: "Mobilemech", …} 1. accordion: {open: ƒ, close: ƒ, toggle: ƒ} 2. actions: {create: ƒ, get: ƒ, destroy: ƒ, open: ƒ, close: ƒ} 3. autocomplete: {create: ƒ, get: ƒ, destroy: ƒ, open: ƒ, close: ƒ} 4. cache: {xhr: Array(2), templates: Array(0), components: Array(2)} 5. calendar: {create: ƒ, get: ƒ, destroy: ƒ, close: ƒ} 6. card: {open: ƒ, close: ƒ, toggle: ƒ} 7. colorPicker: {create: ƒ, get: ƒ, destroy: ƒ, close: ƒ} 8. colorSchemeListener: ƒ (e) 9. component: {registerComponentMixin: ƒ, registerComponent: ƒ, parse: ƒ, create: ƒ} 10. customModal: {create: ƒ} 11. data: {user: {…}, settings: {…}, faultType: Array(205), vechicleType: Array(17), towingVan: Array(4)} 12. dataTable: {create: ƒ, get: ƒ, destroy: ƒ} 13. dialog: {create: ƒ, get: ƒ, destroy: ƒ, open: ƒ, close: ƒ, …} 14. eventsListeners: {init: Array(17), pageInit: Array(25), orientationchange: Array(1), resize: Array(4), modalOpen: Array(2), …} 15. eventsParents: [] 16. fab: {openedEl: null, morphOpen: ƒ, morphClose: ƒ, open: ƒ, close: ƒ, …} 17. form: {data: {…}, storeFormData: ƒ, getFormData: ƒ, removeFormData: ƒ, convertToData: ƒ, …} 18. gauge: {create: ƒ, get: ƒ, destroy: ƒ, update: ƒ} 19. getSize: ƒ () 20. grid: {init: ƒ} 21. height: 640 22. id: "io.framework7.mobilemech" 23. infiniteScroll: {handle: ƒ, create: ƒ, destroy: ƒ} 24. initialized: true 25. input: {scrollIntoView: ƒ, focus: ƒ, blur: ƒ, validate: ƒ, validateInputs: ƒ, …} 26. language: "en-US" 27. lazy: {create: ƒ, destroy: ƒ, loadImage: ƒ, load: ƒ, isInViewport: ƒ} 28. left: 0 29. listIndex: {create: ƒ, get: ƒ, destroy: ƒ} 30. loginScreen: {create: ƒ, get: ƒ, destroy: ƒ, open: ƒ, close: ƒ} 31. menu: {open: ƒ, close: ƒ} 32. messagebar: {create: ƒ, get: ƒ, destroy: ƒ, clear: ƒ, getValue: ƒ, …} 33. messages: {create: ƒ, get: ƒ, destroy: ƒ, renderMessages: ƒ, layout: ƒ, …} 34. methods: {onBackKeyDown: ƒ, onBackKeyDownBackUp: ƒ, helloWorld: ƒ, obOne: ƒ, obTwo: ƒ, …} 35. mq: {dark: MediaQueryList, light: MediaQueryList} 36. name: "Mobilemech" 37. navbar: {size: ƒ, hide: ƒ, show: ƒ, getElByPage: ƒ, getPageByEl: ƒ, …} 38. notification: {create: ƒ, get: ƒ, destroy: ƒ, open: ƒ, close: ƒ} 39. online: true 40. panel: {allowOpen: true, create: ƒ, get: ƒ, destroy: ƒ, open: ƒ, …} 41. params: {version: "1.0.0", id: "io.framework7.mobilemech", root: "#app", theme: "auto", language: "en-US", …} 42. passedParams: {root: "#app", id: "io.framework7.mobilemech", name: "Mobilemech", theme: "auto", pushState: false, …} 43. photoBrowser: {create: ƒ, get: ƒ, destroy: ƒ} 44. picker: {create: ƒ, get: ƒ, destroy: ƒ, close: ƒ} 45. popover: {create: ƒ, get: ƒ, destroy: ƒ, open: ƒ, close: ƒ} 46. popup: {create: ƒ, get: ƒ, destroy: ƒ, open: ƒ, close: ƒ} 47. preloader: {init: ƒ, show: ƒ, hide: ƒ, showIn: ƒ, hideIn: ƒ} 48. progressbar: {set: ƒ, show: ƒ, hide: ƒ} 49. ptr: {create: ƒ, get: ƒ, destroy: ƒ, done: ƒ, refresh: ƒ} 50. range: {create: ƒ, get: ƒ, destroy: ƒ, getValue: ƒ, setValue: ƒ} 51. root: Dom7 {0: div#app.framework7-root, length: 1} 52. router: t {eventsParents: Array(1), eventsListeners: {…}, params: {…}, isAppRouter: true, app: t, …} 53. routes: (88) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] 54. rtl: false 55. searchbar: {create: ƒ, get: ƒ, destroy: ƒ, clear: ƒ, enable: ƒ, …} 56. serviceWorker: {container: ServiceWorkerContainer, registrations: Array(0), register: ƒ, unregister: ƒ} 57. sheet: {create: ƒ, get: ƒ, destroy: ƒ, open: ƒ, close: ƒ, …} 58. smartSelect: {create: ƒ, get: ƒ, destroy: ƒ, open: ƒ, close: ƒ} 59. sortable: {init: ƒ, enable: ƒ, disable: ƒ, toggle: ƒ} 60. statusbar: {hide: ƒ, show: ƒ, overlaysWebView: ƒ, setTextColor: ƒ, setBackgroundColor: ƒ, …} 61. stepper: {create: ƒ, get: ƒ, destroy: ƒ, getValue: ƒ, setValue: ƒ} 62. swipeout: {init: ƒ, open: ƒ, close: ƒ, delete: ƒ, …} 63. swiper: {create: ƒ, get: ƒ, destroy: ƒ} 64. tab: {show: ƒ} 65. textEditor: {create: ƒ, get: ƒ, destroy: ƒ} 66. theme: "md" 67. toast: {create: ƒ, get: ƒ, destroy: ƒ, open: ƒ, close: ƒ, …} 68. toggle: {create: ƒ, get: ƒ, destroy: ƒ} 69. toolbar: {hide: ƒ, show: ƒ, setHighlight: ƒ, initToolbarOnScroll: ƒ, init: ƒ} 70. tooltip: {create: ƒ, get: ƒ, destroy: ƒ, show: ƒ, hide: ƒ, …} 71. top: 0 72. touchEvents: {start: "touchstart", move: "touchmove", end: "touchend"} 73. touchRipple: {create: ƒ} 74. treeview: {open: ƒ, close: ƒ, toggle: ƒ} 75. version: "1.0.0" 76. vi: {sdkReady: false, createAd: ƒ, loadSdk: ƒ} 77. view: (3) [t, t, t, current: (...), main: t, create: ƒ, get: ƒ] 78. views: (3) [t, t, t, current: (...), main: t, create: ƒ, get: ƒ] 79. virtualList: {create: ƒ, get: ƒ, destroy: ƒ} 80. vnodeHooks: {insert: {…}, destroy: {…}, postpatch: {…}, update: {…}} 81. width: 360 82. $: (...) 83. t7: (...) 84. __proto__: t

this in app.methods will be an app instance, use e.target instead to point the element