Why doesn't the selected value of my dynamically created select tag change?

Question

Based on the length of the array fetched from the server as response, I am dynamically creating table rows, where each row will have one record. This is my code:

var array = ["I","I-S","II","III","IV","IV-S","V","VI","VI-S"];
const arr=JSON.parse(response);

for(var i=0;i<arr.length;i++){

    var row=table.insertRow(table.rows.length);
    var cell=row.insertCell(0);
    var cell1=row.insertCell(1);
    var cell2=row.insertCell(2);
    var cell3=row.insertCell(3);

    var input = document.createElement("input");
    input.type = "text";
    input.className="books";
    input.value=arr[i][0];
    input.style.textAlign="center";

    var input1 = document.createElement("input");
    input1.type = "text";
    input1.className="pages";
    input1.value=arr[i][1];
    input1.style.textAlign="center";

    var input2 = document.createElement("select");
    input2.className="types";
    input2.style.textAlign="center";

    for (var i = 0; i < array.length; i++) {
        var option = document.createElement("option");
        option.value = array[i];
        option.text = array[i];
        input2.appendChild(option);
    }
                          
   $(".types option[value*='"+arr[i][2] +"']").attr('selected', 'selected');

   //The selected value should be the one that is in arr[i][2]

   var input3 = document.createElement("input");
   input3.type = "text";
   input3.className="nos";
   input3.value=arr[i][3];
   input3.style.textAlign="center";

   cell.appendChild(input);
   cell1.appendChild(input1);
   cell2.appendChild(input2);
   cell3.appendChild(input3);

}

When I execute the above script, all the <select> tags have VI-S as the selected value. But it should be the one that is in arr[i][2]. How do I change the selected value?