Dynamically inserted CSS (via link) applied after frame onload

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<div id="radio_group_1">
  <!-- radio group one -->
  <input type="radio" name="rdo1" class="some1 text4 radio_group_1" />rdo1
  <input type="radio" name="rdo2" class="some2 text5 radio_group_1" />rdo2
  <input type="radio" name="rdo3" class="some3 text6 radio_group_1" />rdo3
</div>
<div id="radio_group_2">
  <!-- radio group two -->
  <input type="radio" name="rdo4" class="some1 text4 radio_group_2 other1" />rdo4
  <input type="radio" name="rdo5" class="some2 text5 radio_group_2 other2" />rdo5
  <input type="radio" name="rdo6" class="some3 text6 radio_group_2 other3" />rdo6
</div>

JavaScript

$("input[type=radio]").on("click", function(){
	 var groupName = $(this).closest("div").attr("id");
   $("input[type=radio]."+groupName).prop("checked", false);
   $(this).prop("checked", true);
});