Using JavaScript and DOM manipulation to create Cascading Drop Down but rendering incorrectly

I have a simple list that has two drop downs. I am using JavaScript to create a cascading drop down functionality. A reference to my JavaScript file is placed in a content editor webpart of the list form and it functions perfectly. The problem is when I click submit, incorrect values are entered into the list. Not sure why. Please help!

Here's the set-up. I have two lists. A 'Service' list and a 'Service Category' lists. A 1-many relationship. When a value is select in the 'Service' list, that value is used to filter the 'Service Categories' list.

Here's an image for more clarity:

$(document).ready(function(){
//alert(document.querySelector("[title='Service']"));
cascadeDropDown();    
});


function cascadeDropDown(){
var service = document.querySelector("[title='Service']");

service.onchange = function(){
    var serviceSelection = service.options[service.selectedIndex].value;
    console.log("Service: "+serviceSelection);
    getServiceSubValue(serviceSelection);
}
}            

function getServiceSubValue(selectedValue){
//alert(selectedValue)

var category = document.querySelector("[title='Category']");
clearCategoryOption();
var endPointUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Service%20Categories')/items?$filter=Service eq'" + selectedValue + "'";
var headers = { "accept": "application/json;odata=verbose" };        

                    jQuery.ajax({
                        url: endPointUrl,                            
                        type: 'GET',
                        headers: headers,
                        success: function(data){
                            //console.log(data.d.results);
                            //alert(data.d.results);
                            for(var i=1; i<data.d.results.length; i++){
                                console.log(data.d.results[i].Title);
                                console.log(i);
                                var opt = document.createElement("option");
                                opt.value = i;
                                opt.text = data.d.results[i].Title;
                                category.add(opt,null);
                            }
                        }
                   })
 }

 function clearCategoryOption(){
  var category = document.querySelector(" 
  [title='Category']").options.length=0;
 }