JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
  </head>

  <body>
    <h3>JQuery 1.7.1 does not properly set tabindex property on cloned element in IE7</h3>

    Steps To Reproduce:&nbsp;&nbsp;Click each button in order from left to right, noting the tab order after each click.
    <br/><br/>

    <button id="crazyTabIndexButton">Set Crazy Tab Indexes</button>
    <button id="cloneButton">Clone Form</button>
    <button id="resetUsingJqueryButton">Reset Tab Indexes using JQuery</button>
    <button id="resetUsingJavascriptButton">Reset Tab Indexes Using Plain JS</button>

    <div id="formContainer">
      <form>
        <div>0: <input type="text" /></div>
        <div>1: <input type="text" /></div>
        <div>2: <input type="text" /></div>
        <div>3: <input type="text" /></div>
        <div>4: <input type="text" /></div>
      </form>
    </div>
  </body>
</html>

JavaScript

var indexOrder = new Array(1, 3, 5, 2, 4);
 
$(function() {
 $("#crazyTabIndexButton").click(function(event) {
   event.preventDefault();
   setCrazyTabIndexes($(this).parents("form"));
 });

 $("#cloneButton").click(function(event) {
   event.preventDefault();
   var clone = $("form").filter(":first").clone();
   $("#formContainer").append(clone);
 });

 $("#resetUsingJqueryButton").click(function(event) {
   event.preventDefault();
   resetTabIndexesUsingJquery();
 });

 $("#resetUsingJavascriptButton").click(function(event) {
   event.preventDefault();
   resetTabIndexesUsingJs();
 });
});

function setCrazyTabIndexes() {
 $("form :input").each(function(index, input) {
   $(input).prop("tabindex", indexOrder[index]);
 });
}

function resetTabIndexesUsingJquery() {
 var newIndex = 0;
 $("form :input").each(function(index, input) {
   $(input).prop("tabindex", ++newIndex);
 });
}

function resetTabIndexesUsingJs() {
 var newIndex = 0;
 $("form :input").each(function(index, input) {
   input.setAttribute("tabIndex", ++newIndex);
 });
}