# How to update multiple elements?

**URL:** <https://discuss.hotwired.dev/t/how-to-update-multiple-elements/154>\
**Category:** General\
**Created:** [March 3, 2018, 2:39pm UTC](https://discuss.hotwired.dev/t/how-to-update-multiple-elements/154 "2018-03-03T14:39:18Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![mrhead](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/mrhead/32/120_2.png) [@mrhead](https://discuss.hotwired.dev/u/mrhead)\
**Post date:** [March 3, 2018, 2:39pm UTC](https://discuss.hotwired.dev/t/how-to-update-multiple-elements/154/1 "2018-03-03T14:39:19Z")

</div>

I have a SJR endpoint which renders HTML for two different elements and then updates them. What is the proposed approach to do this with Stimulus?

With Stimulus, I can send only one HTML response from the server. So the only solution which I see is to parse the response and then update each element separately. But, I kind of don’t like this solution because SJR approach looks much simpler to me. Is there a better way how to do this with stimulus?

Thank you in advance for any ideas!

---

<div class="post-metadata">

**Author:** ![abe](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/abe/32/201_2.png) [@abe](https://discuss.hotwired.dev/u/abe)\
**Post date:** [September 23, 2018, 8:10am UTC](https://discuss.hotwired.dev/t/how-to-update-multiple-elements/154/2 "2018-09-23T08:10:00Z")

</div>

Not sure if this is ideal…  
but would a JSON response that contained 2 properties, where each property contained the rendered partial work?

```auto
def update
  # save changes here
  element1 = render_to_string 'partial1'
  element2 = render_to_string 'parial2'

  render json: { element1: element1, element2: element2 }
end

```

```auto
export default class extends Controller {
  static targets = ['element1', 'element2'];
  onUpdate(e) {
    const [data, status, xhr] = e.detail;
  
    this.element1Target.innerHTML = data.element1; // assuming properly escaped
    this.element2Target.innerHTML = data.element2;
  }
}

```