Your current javascript will replace all elements that have the "State" class with the same select list using the same name, id, and other attributes, even required.

What you can do is target the individual fields and replace the respective inputs with its own select list, but making one required and one not required.

See the below example based off of a form that only has two address fields. Field1 is required and Field2 is not required. Then you can use

$(document).ready (function () {
  
  $(".Country").parent().children().val("USA");
  
  $('input[name=Field1_DSG3]').replaceWith('<select name="Field1_DSG3" class="form-item-field  required State" vo="e" required="required" id="Field1_DSG3">' +
        '<option></option>' +
        '<option value="Alabama">AL</option>' +
        '<option value="Alaska">AK</option>' +
        '<option value="Arizona">AZ</option>' +
        '<option value="Arkansas">AR</option>' +
        '<option value="California">CA</option>' +
        '</select>');
  
  $('input[name=Field2_DSG3]').replaceWith('<select name="Field2_DSG3" class="form-item-field State" vo="e" id="Field2_DSG3">' +
        '<option></option>' +
        '<option value="Alabama">AL</option>' +
        '<option value="Alaska">AK</option>' +
        '<option value="Arizona">AZ</option>' +
        '<option value="Arkansas">AR</option>' +
        '<option value="California">CA</option>' +
        '</select>');
  
})