\
**Category:** General\
**Created:** [November 14, 2018, 11:00pm UTC](https://discuss.hotwired.dev/t/this-element-outerhtml-not-catching-up-changes/526 "2018-11-14T23:00:13Z")\
**Posts on this page:** 2\
**Page:** 1
**Author:**  [@mxb](https://discuss.hotwired.dev/u/mxb)\
**Post date:** [November 14, 2018, 11:00pm UTC](https://discuss.hotwired.dev/t/this-element-outerhtml-not-catching-up-changes/526/1 "2018-11-14T23:00:13Z")
Hello!
I’m trying to create a simple “Follow me” button using rails and Stimulus (1.1). Simplified HTML markup for it is as follows:
```auto
a.btn.btn-wider.btn-sm(data-controller="follow-btn"
data-follow-btn-action-path=toggle_follow_api_ujs_account_path(presenter.account)
data-follow-btn-following=presenter.following?.to_s
data-action="click->follow-btn#toggle")
| Follow me
```
Stimulus controller looks like this:
```auto
import BaseController from "./base_controller"
import axios from 'axios'
export default class extends BaseController {
initialize () {
}
toggle () {
let req = axios.post(this.data.get('actionPath'))
req.then((resp) => {
this.element.outerHTML = resp.data
console.log(this.following) # <== this returns the previous attribute value!
})
}
get following () {
return this.data.get('following')
}
}
```
And basically, after using `this.element.outerHTML` (is that even a “legal” approach?), `this.data.get` returns values from before the outerHTML swap. Am i doing something wrong in here or is that known and reasonable behavior?
Thanks in advance!
---
**Author:**  [@javan](https://discuss.hotwired.dev/u/javan)\
**Post date:** [November 16, 2018, 9:40pm UTC](https://discuss.hotwired.dev/t/this-element-outerhtml-not-catching-up-changes/526/2 "2018-11-16T21:40:48Z")
> [@mxb](#):
>
> after using `this.element.outerHTML` (is that even a “legal” approach?), `this.data.get` returns values from before the outerHTML swap
Setting an element’s `outerHTML` removes it from the DOM, which will `disconnect()` its controller instance. I assume your `resp.data` HTML contains similar markup with `data-controller="follow-btn"`? If so, then a new controller instance will be created.
Try logging the complete lifecycle:
```js
let id = 0
export default class extends BaseController {
initialize() {
this.id = id++
console.log("initialize", this.id)
}
connect() {
console.log("connect", this.id)
}
disconnect() {
console.log("disconnect", this.id)
}
}
```
If you want to keep the same controller instance alive, set `innerHTML` instead.