JSFiddle - React, Tailwind, and code Playground

by Zubair Mushtaq

HTML

<table width="300">
  <tbody class="ui-sortable" style="">
    <tr class="" style="">
      <td><input class="product_addon_option_label" name="product_addon_option_label" value="Arial" placeholder="Label" type="text">
        <select class="font-select">
          <option value="One">One</option>
          <option value="Two" selected="selected">Two</option>
          <option value="Three">Three</option>
        </select>
      </td>
    </tr>
    <tr class="" style="">
      <td><input class="product_addon_option_label" name="product_addon_option_label" value="Thohm" placeholder="Label" type="text">
        <select class="font-select">
          <option value="One">One</option>
          <option value="Two" selected="selected">Two</option>
          <option value="Three">Three</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

JavaScript

jQuery(document).ready( function( $ ) {

		var current_field = 
		$(".font-select option").filter(function() {
		
		current_field = $(this);
		
		return $(current_field).val() == $(".product_addon_option_label").val();
		
		}).attr('selected', true);
		
		$(".font-select").live("change", function() {
		$(this).prev(".product_addon_option_label").val($(this).val());
		});

});