Select an option text matching those of an array value jquery

Question

I have an array with three elements, Im looping through that array to see the length of it so that it button click three times to dynamically add input select box. Each array value will go on each added select box and find if it match any option text if it does it add the attribute selected. I tried different ways to do I will demonstrate how the two code works

    var myArryValues = [
    "Hello World",
    "Javascript",
    "Jquery"
]

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

    //New code 

    var s = $('<select class="myDropdown">');
    for (var j = 0; j < myArryValues.length; j++) {
        if (i == j) {
            $('<option />', {
                value: myArryValues[j],
                text: myArryValues[j],
                selected: 'selected'
            }).appendTo(s);
        } else {
            $('<option />', {
                value: myArryValues[j],
                text: myArryValues[j]
            }).appendTo(s);
        }
    }
    s.appendTo('.mySelect');

    var bookIndex = 0;

    $('#bookForm').on('click', '.mynewButton', function() {


            ///I had this code before it wasnt find anything
            $('.myDropdown').each(function(index) {
                console.log("operatorString", operatorString);
                var operatorCounter = 0;
                var optionCounter = 0;
                $(this).find('option').filter(function() {
                    if ($(this)[optionCounter] == myArryValues[operatorCounter]) {
                        $(this)[optionCounter].attr('selected', "selected");
                        operatorCounter++;
                    } else {
                        optionCounter++;
                    }

                });
            });
            console.log("mynewButton");
            bookIndex++;
            var bookForm = $('#bookForm');
            var $template = $('#bookTemplate'),
                $clone = $template
                .clone()
                .addClass('myDropdown-row')
                .removeClass('hide')
                .attr('data-book-index', bookIndex)
                .attr('id', '');

            bookForm.append($clone);

            // Update the name attributes
            $clone
                .find('[name="myDropdown"]').attr('name', 'myDropdown[' + bookIndex + '].myDropdown').end()

        })
        // Remove button click handler
        .on('click', '.removeButton', function() {
            $(this).parents('.form-group').remove();
        });

HTML below

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="row" id="bookForm" class="form-horizontal">
  <div class="form-group">
    <div class="col-md-2 button-div">
      <button type="button" class="mynewButton rule-button">Add New
            </button>
    </div>
  </div>
  <!-- The template for adding new field -->
  <div class="form-group hide" id="bookTemplate">
    <div class="row field-row">
      <div class="col-md-2 mySelect">
        <select class="myDropdown" name="myDropdown">
          <option value="Hello World">Hello World</option>
          <option value="Javascript">Javascript</option>
          <option value="Jquery">Jquery</option>
        </select>
      </div>
    </div>
  </div>
</div>

HTML OUTPUT COME LIKE THIS

<div class="col-md-2 mySelect">
    <select class="myDropdown" name="myDropdown">
      <option value="Hello World" selected="selected">Hello World</option>
      <option value="Javascript">Javascript</option>
      <option value="Jquery">Jquery</option>
    </select>
    <select class="myDropdown" name="myDropdown">
      <option value="Hello World">Hello World</option>
      <option value="Javascript"  selected="selected">Javascript</option>
      <option value="Jquery">Jquery</option>
    </select>
    <select class="myDropdown" name="myDropdown">
      <option value="Hello World">Hello World</option>
      <option value="Javascript" >Javascript</option>
      <option value="Jquery" selected="selected">Jquery</option>
    </select>
  </div>
  <div class="col-md-2 mySelect">
    <select class="myDropdown" name="myDropdown">
      <option value="Hello World" selected="selected">Hello World</option>
      <option value="Javascript">Javascript</option>
      <option value="Jquery">Jquery</option>
    </select>
    <select class="myDropdown" name="myDropdown">
      <option value="Hello World">Hello World</option>
      <option value="Javascript"  selected="selected">Javascript</option>
      <option value="Jquery">Jquery</option>
    </select>
    <select class="myDropdown" name="myDropdown">
      <option value="Hello World">Hello World</option>
      <option value="Javascript" >Javascript</option>
      <option value="Jquery" selected="selected">Jquery</option>
    </select>
  </div>
  <div class="col-md-2 mySelect">
    <select class="myDropdown" name="myDropdown">
      <option value="Hello World" selected="selected">Hello World</option>
      <option value="Javascript">Javascript</option>
      <option value="Jquery">Jquery</option>
    </select>
    <select class="myDropdown" name="myDropdown">
      <option value="Hello World">Hello World</option>
      <option value="Javascript"  selected="selected">Javascript</option>
      <option value="Jquery">Jquery</option>
    </select>
    <select class="myDropdown" name="myDropdown">
      <option value="Hello World">Hello World</option>
      <option value="Javascript" >Javascript</option>
      <option value="Jquery" selected="selected">Jquery</option>
    </select>
  </div>

The Output I'm looking for is like below

 <div class="col-md-2 mySelect">
    <select class="myDropdown" name="myDropdown">
      <option value="Hello World" selected="selected">Hello World</option>
      <option value="Javascript">Javascript</option>
      <option value="Jquery">Jquery</option>
    </select>
  </div>
  <div class="col-md-2 mySelect">
    <select class="myDropdown" name="myDropdown">
      <option value="Hello World">Hello World</option>
      <option value="Javascript"  selected="selected">Javascript</option>
      <option value="Jquery">Jquery</option>
    </select>
  </div>
  <div class="col-md-2 mySelect">
      <select class="myDropdown" name="myDropdown">
      <option value="Hello World">Hello World</option>
      <option value="Javascript" >Javascript</option>
      <option value="Jquery" selected="selected">Jquery</option>
    </select>
  </div>

Please help :)

Answer 1

Check This...

var myArryValues = ["Hello World","Javascript","Jquery"];
	$('#bookForm').on('click', '.mynewButton', function() {
		$(this).addClass('hide');
		$('#bookTemplate-1').removeClass('hide');
		for (var j=1;j<myArryValues.length;j++) {
			var thisRow = $('.dropdown').last(".dropdown");
			var newid = parseInt(thisRow.attr('divid'))+1;
			newRow = thisRow.clone(true).insertAfter(thisRow).
			find('select').each(function(){
				$(this).attr('name','myDropdown['+(newid-1)+']');
			}).end().
			find('option[value="'+myArryValues[j]+'"]').each(function(){
				$(this).attr('selected','selected');
			}).end();
			thisRow.next('.dropdown').attr("divid",newid).attr("id","bookTemplate-"+newid);
			//$('select[id="bookTemplate-'+newid+'"]').val(myArryValues[j]);
			
		}
	});

<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bookForm" class="form-horizontal">
	<div class="form-group">
    	<div class="col-md-12 button-div">
        	<button type="button" class="mynewButton">Add New</button>
        </div>
    </div>
    <div class="form-group dropdown hide" id="bookTemplate-1" divid="1">
    	<div class="field-row">
        	<div class="col-md-2 mySelect">
            	<select class="myDropdown" name="myDropdown[0]">
                	<option value="Hello World">Hello World</option>
                    <option value="Javascript">Javascript</option>
                    <option value="Jquery">Jquery</option>
                </select>
            </div>
        </div>
    </div>
</div>