Line item properties in Dawn theme for Bundles app

global.js

// when variant changes
this.updateBundleVariant( variant );

// add at bottom of JS file
function updateBundleVariant( variant ) {
  // remove old line item properties from DOM
  [ ...document.querySelectorAll( '.bundles_lineItemProperty' ) ].forEach( lineItemProperty => {
    lineItemProperty.parentNode.removeChild( lineItemProperty );
  } );

  // get correct bundle
  const bundleElement = document.querySelector(`#bundle_${variant.id}`);
  if ( bundleElement ) {
    const bundle = JSON.parse( bundleElement.dataset.products );
    const formId = bundleElement.dataset.formId;
    if ( !!bundle ) {
      const bundleDiv = document.querySelector( '#bundles_child_products' );

      if ( !!bundleDiv ) {
        bundle.forEach( ( product, index ) => {
          const { itemNo, title, quantity, sku } = { itemNo: index + 1, ...product };
    
          // add line item property to DOM
          const lineItemProperty = document.createElement( 'input' );
          lineItemProperty.setAttribute( 'class', 'bundles_lineItemProperty' );
          lineItemProperty.setAttribute( 'type', 'hidden' );
          lineItemProperty.setAttribute( 'name', `properties[_${itemNo}]` );
          lineItemProperty.setAttribute( 'value', `${quantity}x ${title} ${!!sku ? `(${sku})` : ''}` );
          lineItemProperty.setAttribute( 'form', `product-form-${formId}` );
    
          bundleDiv.appendChild( lineItemProperty );
        } );
      } 
    }
  }
}

main-product.liquid

<div id="bundles_child_products">
  {% if product.variants.size > 1 %}
    {% assign lines = product.selected_or_first_available_variant.metafields.bundles_app.content.value %}
    {% for line in lines %}
      {% if line.sku != null %}
        <input class="bundles_lineItemProperty"
               type="hidden"
               name="properties[_{{ forloop.index }}]"
               value="{{ line.quantity }}x {{ line.title }} ({{ line.sku }})"
               form="{{ product_form_id }}"
        >
      {% else %}
        <input class="bundles_lineItemProperty"
               type="hidden"
               name="properties[_{{ forloop.index }}]"
               value="{{ line.quantity }}x {{ line.title }}"
               form="{{ product_form_id }}"
        >
      {% endif %}
    {% endfor %}
    {% for variant in product.variants %}
      <span id="bundle_{{ variant.id }}" data-products='{{ variant.metafields.bundles_app.content.value | json }}' data-form-id='{{ product_form_id }}'></span>
    {% endfor %}
  {% else %}
    {% for variant in product.variants %}
      {% assign lines = variant.metafields.bundles_app.content.value %}
      {% for line in lines %}
        {% if line.sku != null %}
          <input id="bundle-child-product-{{ forloop.index }}"
                 type="hidden"
                 name="properties[_{{ forloop.index }}]"
                 value="{{ line.quantity }}x {{ line.title }} ({{ line.sku }})"
                 form="{{ product_form_id }}"
          >
        {% else %}
          <input id="bundle-child-product-{{ forloop.index }}"
                 type="hidden"
                 name="properties[_{{ forloop.index }}]"
                 value="{{ line.quantity }}x {{ line.title }}"
                 form="{{ product_form_id }}"
          >
        {% endif %}
      {% endfor %}
    {% endfor %}
  {% endif %}
</div>