adding a tabindex attr to a specific input
<p>I have an issue i am trying to modify a form's tab order which the HTML is out of my control, so i need to modify the code with JQuery to make the form tab in a way that i want.</p>

<p>here is the html code i cant change:</p>

<pre><code>&lt;div class="form1"&gt;
    &lt;label&gt;First Name&lt;/label&gt;
    &lt;input id="field1" class="field1" type="text" value="" name="Initials"&gt;
&lt;/div&gt;
</code></pre>

<p>and i thought that this JQuery:</p>

<pre><code>$(document).ready(function() {
        $("#field1").attr("tabindex","1");
});
</code></pre>

<p>would generate:</p>

<pre><code>&lt;div class="form1"&gt;
   &lt;label&gt;First Name&lt;/label&gt;
   &lt;input id="field1" class="field1" tabindex="1" type="text" value="" name="Initials"&gt;
&lt;/div&gt;
</code></pre>

<p>yet i was wrog it did nothing.</p>

<p>there is alot more inputs i need to target and all with random ID's :(</p>

<hr>

<p>Additional information.</p>

<p>the form is generated by (i have changed some of the values but hope it makes sense):</p>

<pre><code>&lt;script type="text/javascript" src="https://XXX.com/widget.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
var widget_config = {
   widgetId: 'XX',
   campaignId: 'XX',
   clientId: 'XX',
   trackingId: 'website',
   baseUrl: 'https://XXX.com'
}

var display_config7 = {
   cssId: 1,
   'background-color': '#',
   'font-family': 'Times New Roman',
   'color': '#000000',
   'font-size': '12px',
   'width': 400,
   'height': 600
}

widget.init('#widget_XXX', widget_config_XXX, display_config_XXX);

&lt;/script&gt;
</code></pre>

<p>adding the JQuery to the page does not target this code generated so i tried adding it within the script itself which too did not work:</p>

<pre><code>&lt;script type="text/javascript" src="https://XXX.com/widget.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
var widget_config = {
   widgetId: 'XX',
   campaignId: 'XX',
   clientId: 'XX',
   trackingId: 'website',
   baseUrl: 'https://XXX.com'
}

var display_config7 = {
   cssId: 1,
   'background-color': '#',
   'font-family': 'Times New Roman',
   'color': '#000000',
   'font-size': '12px',
   'width': 400,
   'height': 600
}

widget.init('#widget_XXX', widget_config_XXX, display_config_XXX);

$("#field-Initials").attr("tabindex","1");
$("#field-Surname").attr("tabindex","2");

&lt;/script&gt;
</code></pre>
