# Making Add New option appear first!

**URL:** <https://forums.knack.com/t/making-add-new-option-appear-first/17370>\
**Category:** Tips & Tricks\
**Created:** [June 7, 2024, 1:10pm UTC](https://forums.knack.com/t/making-add-new-option-appear-first/17370 "2024-06-07T13:10:16Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![StephenChapman](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/stephenchapman/32/1759_2.png) [@StephenChapman](https://forums.knack.com/u/StephenChapman)\
**Post date:** [June 8, 2024, 6:15pm UTC](https://forums.knack.com/t/making-add-new-option-appear-first/17370/2 "2024-06-08T18:15:00Z")

</div>

Hi @GSH,  
You can do this with the following JS:

If you want to only apply it to one particular field:

```auto
$(document).on('knack-view-render.any', function(event, view, record) {

  const connectionFieldKey = 'field_xx'; // Replace field_xx with your connection field key
  const $inputDiv = $(`#${view.key} #kn-input-${connectionFieldKey}`);
  const $inputControl = $inputDiv.children('.control');
  const $addOptionLink = $inputControl.children('.kn-add-option');
  $addOptionLink.insertBefore($inputControl);

});

```

If you want to apply it for all connection fields:

```auto
$(document).on('knack-view-render.any', function(event, view, record) {

  $(`#${view.key} .kn-input-connection`).each(function() {

    const $inputControl = $(this).children('.control');
    const $addOptionLink = $inputControl.children('.kn-add-option');
    $addOptionLink.insertBefore($inputControl);

  });

});

```

The result should look something like this:  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/b/bbcf06dd9da498c5d1317c2855bc7c173f06cf86.png)

---

_[View the full topic](https://forums.knack.com/t/making-add-new-option-appear-first/17370)._