jquery update hidden and a tags First off, not the greatest with jQuery but know enough to get by. I created this mock up that is base on my application and wanted to see if there is a better way to update hidden values and a tags. When the form is saved I am using the sortorder to find the corresponding .ui-sortable li that has a tag and hidden fields to get updated on the page. I am trying to update the correct one and looping all of them checking with the sortorder  I just wanted to know if there is a better way to do this?

https://jsfiddle.net/tjmcdevitt/vh9n5srL/35/


actual code from a project

$("#submit-form").submit(function (event) {
    event.preventDefault();
    var sortOrder = $(this).data('sortorder');
        $('.ui-sortable li').each(function (i) {
        if (i == sortOrder) {
            console.log('Updating');

            $("#References_0_UI").html(data.referenceText);
            $("#References_0_UI").attr("href", data.GuidelineExternalReference);

            $('input[name="References[0].Text"]').val(data.referenceText);
            $('input[name="References[0].Link"]').val(data.GuidelineExternalReference);
            $('input[name="References[0].GuidelineId"]').val(data.Value);
            console.log("Completed Task");
        }
});
The main issue I see is that the looping doesn't accomplish anything useful, since you never reference the li that you iterate over - just take the sortOrder from the form and concatenate it into the selectors you try to find.

Because you reference the #References_##_UI twice, consider saving it in a variable first - or, even better, since this is jQuery, you can chain methods on the selected collection.

It sounds like the data.referenceText is text, not HTML markup - in which case you should insert it into the DOM with .text, not with .html. (.text is faster and safer)

$('#submit-form').submit(function (event) {
  event.preventDefault();
  const sortOrder = $(this).data('sortorder');
  $(`#References_${sortOrder}_UI`)
    .text(data.referenceText)
    .prop('href', data.GuidelineExternalReference);
  $(`input[name='References[${sortOrder}].Text']`).val(data.referenceText);
  $(`input[name='References[${sortOrder}].Link']`).val(data.GuidelineExternalReference);
  $(`input[name='References[${sortOrder}].GuidelineId']`).val(data.Value);
});


The above looks mostly reasonable to me, but I'd change the HTML too, if that's permitted. Numeric-indexed IDs are never a good idea; IDs should be reserved for singular, unique elements. (You can also consider not using IDs at all, because every time there is one, a global variable is created, and globals can result in confusing behavior).

A related issue is that the submit handler here is attached to:

$('#submit-form').submit(


Since IDs must be unique in a document, this will only attach a listener to a single form, but it sounds like you have multiple forms that you want to listen for submit events to.

To solve the duplicate IDs and the numeric-indexed IDs, use the already-existing class to select the forms instead, and once you have a reference to the form in the handler, use .find to select its children elements that need to be populated.

Your 3 hidden inputs are somewhat repetitive. It might look somewhat tolerable now, but if you might add more, or for the general case of linking each data property name to a particular input, consider using an object or array linking each property to the selector:

const inputNamesByDataProps = {
  referenceText: 'Text',
  GuidelineExternalReference: 'Link',
  Value: 'GuidelineId',
};
$('.form-horizontal').on('submit', (event) =&gt; {
  event.preventDefault();
  const $this = $(this);
  $this.find('a')
    .text(data.referenceText)
    .prop('href', data.GuidelineExternalReference);
  for (const [dataProp, inputName] of Object.entries(inputNamesByDataProps)) {
    $this.find(`input[name$=${inputName}]`).val(data[dataProp]);
  }
});


(The [name$=${inputName}] means: "Find an element whose name attribute ends with what's in inputName")

&lt;form class="form-horizontal" data-sortorder="1"&gt;
  &lt;p&gt;Update Values&lt;/p&gt;
  &lt;a class="References_1_UI" href="www.current.com" target="_blank"&gt;Testing html&lt;/a&gt;.
  &lt;input type='hidden' name='References[1].Index' value="1"&gt;
  &lt;input type='hidden' name='References[1].Link' value="www.oldlink.com"&gt;
  &lt;input type='hidden' name='References[1].Id' value="88"&gt;
  &lt;div class="text-center"&gt;
    &lt;button type="submit"&gt;Save&lt;/button&gt;
    &lt;button type="button" data-dismiss="modal"&gt;Close&lt;/button&gt;
  &lt;/div&gt;
&lt;/form&gt;


The input HTML name attributes look pretty repetitive too, but repetitive HTML usually isn't something to worry about, especially if your backend logic is easier to work with when the attributes are like References[1].Index. But if you wanted, you could change it to something like

&lt;input type='hidden' name='sortorder' value="1"&gt;
&lt;input type='hidden' name='Index' value="1"&gt;
&lt;input type='hidden' name='Link' value="www.oldlink.com"&gt;
&lt;input type='hidden' name='Id' value="88"&gt;


putting the [1] into the hidden sortorder input instead, and then parse the form values on the backend.