JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <label>品號:
    <input id="No" name="No" value="0000844892"> (品號改變,尺碼也變)
  </label>
</div>

<div>
  <label>尺碼:
    <input id="Size" name="Size" value="5-7-9-11-13"> (尺碼改變,輸入區也變)
  </label>
</div>

<p>輸入區</p>
<div id="inputArea">
</div>
<div>
  <label>結果: <span id="result"></span></label>
</div>
<button id="saveButton">Save</button>

CSS

body {
  margin: 1em;
}

div {
  border: 1px solid darkgrey;
  border-radius: 5px;
  width: 25em;
  margin: 5px;
  padding: 5px;
}

input[name='QuantityInput'] {
  width: 3em;
}

JavaScript

$("#saveButton").click(function() {
  var $QuantityInput = $("input[name='QuantityInput']");
  var size = [];
  $.map($QuantityInput, function(QuantityInput) {
    var s = $(QuantityInput).data("size");
    var q = $(QuantityInput).val();
    if (q && q > 0) {
      size.push(s + "(" + q + ")");
    }
  });
  $("#result").text(size.join());
});

$.fn.observe = function(eventName, callback) {
  return this.each(function() {
    var that = this;
    $(document).on(eventName, function() {
      callback.apply(that, arguments);
    });
  });
};

$('#No').on('change', function(e) {
  $('#Size').val("S-M-L");
  $('#Size').trigger('change');
  $("#result").text("");
});

$('#Size').on('change', function(e) {
  $(this).trigger('productNoChanged', $(this).val());
});

$("#inputArea").observe('productNoChanged', function(e, newSize) {
  var sizes = newSize.split("-");
  $("#inputArea").empty();
  $.map(sizes, function(size) {
    var html = "<label>{size}:<input name='QuantityInput' data-size='{size}'></label>";
    html = html.replace(/\{size\}/g, size);
    $("#inputArea").append(html);
  });
});

$('#Size').trigger('productNoChanged', $("#Size").val());