title: Updating an attribute of an element isnt affecting the DOM
body: <p>I have loaded a set of elements in from my backend using ajax and then displayed them on my website, this happens multiple times and this includes radio inputs which are grouped togther using the name attribute i am attempting to seperate these radios into there own groups on my page so that i could have multiple groups of radios that dont affect each other.</p>
  <pre><code>&lt;div class=&quot;row w-50 RadioGroup&quot;&gt;
      &lt;div class=&quot;form-check w-50&quot;&gt;
          &lt;input class=&quot;form-check-input OneAnswer&quot; type=&quot;radio&quot; name=&quot;exampleRadios&quot; id=&quot;exampleRadios1&quot; value=&quot;option1&quot;
              checked&gt;
          &lt;label class=&quot;form-check-label&quot; for=&quot;exampleRadios1&quot;&gt;
              User has to select one correct answer
          &lt;/label&gt;
      &lt;/div&gt;
      &lt;div class=&quot;form-check w-50&quot;&gt;
          &lt;input class=&quot;form-check-input AllAnswers&quot; type=&quot;radio&quot; name=&quot;exampleRadios&quot; id=&quot;exampleRadios2&quot; value=&quot;option2&quot;&gt;
          &lt;label class=&quot;form-check-label&quot; for=&quot;exampleRadios2&quot;&gt;
              User has to select all correct answers
          &lt;/label&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The code above shows the radio elements that are shown i have written some jquery to change the name and when i console.log the name it does in fact change but the chnages arent shown in the DOM and because of this the radios all still afect each other rather than just the radios with the same name.</p>
  <p>The code to change the radio names is below</p>
  <pre><code>    $(Div).find(&quot;:radio&quot;).each(function (index, value) {
          $(value).get(0).setAttribute(&quot;name&quot;, $(value).get(0).getAttribute(&quot;name&quot;) + RadiosCount)
          console.log($(value).get(0).getAttribute(&quot;name&quot;))
      })
      RadiosCount++;
  }
  </code></pre>
  <p>Ive also tried changing the propertey as well the only way i can get the radios to behave properley is to change the radios name in the inspector.</p>
  <p>So to summarise how do i change the name attribute of the elements so that the radios dont all affect each other? only the two that should affect each other in there own group.</p>