How to link two array indices using jquery for each?

See more:

Javascript

jQuery

jQuery-UI

Inside my bootstrap modal I have one textarea labeled "options" and another textarea labeled "part number". Options and Part numbers are both objects that are converted into arrays and linked manually (see "if/else if" statement below) after the user clicks "Save Changes".

I would like "Option 1/Part#1", "Option 2/Part#2"etc. to be linked so that the attribute value of "Option 1" will be "Part#1".

Keep in mind this is a formbuilder using jQuery drag/drop so doing this while not creating duplicate id's has been a challenge for me.

Please click on the link for a working example of the project. Here[^]

How can I make a loop that will assign "Part#'s" to the "Option" attribute value dynamically without being hard-coded like below?

Please help! Thanks

What I have tried:

 	save_changes.combobox = function(values) {
		console.log(values);
		var div_ctrl = $("#" + values.forCtrl);
		var ctrl = div_ctrl.find("select")[0];
	    var optionCount = 1;
	    var partNumberCount = 1;

	    ctrl.value = values.value;

	/**
	* Clear the option(s) textarea and append the newly entered values
	**/

		$(ctrl).empty();
   
		$(values.options.split('\n')).each(function(i,o) {
      		$(ctrl).append("<option>" + $.trim(o) + "</option>");
		});

	/**
	* Clear the part number(s) textarea and append the newly entered values
	**/

    	$(ctrl).parent().find("select.group2").empty();

		$(values.value.split('\n')).each(function(i,o) {
			$(ctrl).parent().find("select.group2").append("<option>" + $.trim(o) + "</option>");
		});
 
	    //Objects containing the saved options and part numbers
	    var optionsObject = $(values.options.split('\n'));
	    var partsObject = $(values.value.split('\n'));
	    
	    //Conversion of the options Object to an array
	    var optionsArray = $.map(optionsObject, function(value, index) {
	      return [value];
	    });
	    //Conversion of the parts Object to an array
	    var partsArray = $.map(partsObject, function(value, index) {
	      return [value];
	    });
	    // console.log(partsArray);  
	    
	    var $create_combobox_id = div_ctrl.parent().find("select.ctrl-combobox");
	    var count = 1;
	    	$create_combobox_id.each(function() {
	    		var $foo = $(this);
	    		$foo.attr("id", count++);
	    	});

	    /* Assigning unique id's to the generated options */
	    var $individualOption = div_ctrl.find("option");        
	      $.each(partsArray, function($index, value) {
	          var partsIndex = $index;
	          // console.log(partsIndex);
	     });
	    $individualOption.each(function() {    
 
	      var $something = $(this);
	      if ($something.parent().is("select#1")) {	      
		      $something.attr('name', 'option' + optionCount++);
		      $something.attr('class', 'generatedOptions');
		      $('option[name="option1"]').attr('value', '(' + partsArray[0] + ')');
		      $('option[name="option2"]').attr('value', '(' + partsArray[1] + ')');
		      $('option[name="option3"]').attr('value', '(' + partsArray[2] + ')');
		      $('option[name="option4"]').attr('value', '(' + partsArray[3] + ')');
		      $('option[name="option5"]').attr('value', '(' + partsArray[4] + ')');
		      $('option[name="option6"]').attr('value', '(' + partsArray[5] + ')');
		      $('option[name="option7"]').attr('value', '(' + partsArray[6] + ')');
		      $('option[name="option8"]').attr('value', '(' + partsArray[7] + ')');
		      $('option[name="option9"]').attr('value', '(' + partsArray[8] + ')');
		      $('option[name="option10"]').attr('value', '(' + partsArray[9] + ')');
	      } else if ($something.parent().is("select#3")) {
		      $something.attr('name', 'option' + '-' + optionCount++);
		      $something.attr('class', 'generatedOptions');
		      $('option[name="option-1"]').attr('value', '(' + partsArray[0] + ')');
		      $('option[name="option-2"]').attr('value', '(' + partsArray[1] + ')');
		      $('option[name="option-3"]').attr('value', '(' + partsArray[2] + ')');
		      $('option[name="option-4"]').attr('value', '(' + partsArray[3] + ')');
		      $('option[name="option-5"]').attr('value', '(' + partsArray[4] + ')');
		      $('option[name="option-6"]').attr('value', '(' + partsArray[5] + ')');
		      $('option[name="option-7"]').attr('value', '(' + partsArray[6] + ')');
		      $('option[name="option-8"]').attr('value', '(' + partsArray[7] + ')');
		      $('option[name="option-9"]').attr('value', '(' + partsArray[8] + ')');
		      $('option[name="option-10"]').attr('value', '(' + partsArray[9] + ')');
	      }
      });
}