# Keeping views and inputs synchronized after sorting data

**URL:** <https://talk.observablehq.com/t/keeping-views-and-inputs-synchronized-after-sorting-data/6183>\
**Category:** Help\
**Created:** [February 7, 2022, 11:51pm UTC](https://talk.observablehq.com/t/keeping-views-and-inputs-synchronized-after-sorting-data/6183 "2022-02-07T23:51:43Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![bronna](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bronna/32/6929_2.png) [@bronna](https://talk.observablehq.com/u/bronna)\
**Post date:** [February 7, 2022, 11:51pm UTC](https://talk.observablehq.com/t/keeping-views-and-inputs-synchronized-after-sorting-data/6183/1 "2022-02-07T23:51:43Z")

</div>

Hi everyone,

I’m trying to have several inputs in a notebook stay synchronized, but am having trouble figuring out how to structure it.

In this notebook, if you click ‘Select All’ then ‘Sort selected states by longitude’ then ‘Clear All’, the underlying data seems to get out of order so that when you go back to the multi-select and select states, the wrong ones show up.

I’ve put the sorted data into a mutable value, and it seems like that might be where it’s getting mixed up. I’ve also tried binding the multi-select to the sorted data, but that doesn’t seem to work, either. I’d appreciate any pointers.

Thanks!  
Brianna

> **[Keeping inputs and views synchronized](https://observablehq.com/d/eae532ac2c462fcd)**
>
> Map data and setup Helper functions

---

<div class="post-metadata">

**Author:** ![tomlarkworthy](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tomlarkworthy/32/5940_2.png) [@tomlarkworthy](https://talk.observablehq.com/u/tomlarkworthy)\
**Post date:** [February 8, 2022, 5:57am UTC](https://talk.observablehq.com/t/keeping-views-and-inputs-synchronized-after-sorting-data/6183/2 "2022-02-08T05:57:42Z")

</div>

I can’t observe the issue from your description, but sort changes ar array in place so I think the issue is

change

```auto
sortedData = selectedStatesData.sort((a, b) => a.properties.longitude - b.properties.longitude)

```

to

```auto
sortedData = [...selectedStatesData].sort((a, b) => a.properties.longitude - b.properties.longitude)

```

so the original selectedStatesData doesn’t get altered (we use … as a cheap way to do a clone)

---

<div class="post-metadata">

**Author:** ![bronna](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bronna/32/6929_2.png) [@bronna](https://talk.observablehq.com/u/bronna)\
**Post date:** [February 8, 2022, 6:29pm UTC](https://talk.observablehq.com/t/keeping-views-and-inputs-synchronized-after-sorting-data/6183/3 "2022-02-08T18:29:14Z")

</div>

> [@tomlarkworthy](#):
>
> `[...selectedStatesData]`

Ah that’s it! Many thanks!