Problems saving Shopify properties in cart

1

I’m having problems saving the line item properties in my shopify cart. I have managed to get each item property to save for ONE item only, but all other items are overridden with the first item’s value. I can’t seem to figure out what I’m doing wrong.

I’m looping through the index for the cart items:

<script>
    var cart_items = {{cart.items | json}} 
</script>

{% if property_size > 0 %}
  {% assign loop_index = forloop.index %}
  {% for p in item.properties %}
    {% assign first_character_in_key = p.first | truncate: 1, '' %}
    {% unless p.last == blank or first_character_in_key == '_' %}
      <div class="accordion-container collapse-sm cart-line-item-accordion">
        <input type="checkbox" title="Expand for more information" checked>
        <h2 class="accordion-title">
          <span>{{ p.first }}:</span>
          <i class="accordion-icon"></i>
        </h2>

        <div class="accordion-content">

          <div class="saved-textarea visible">
            {{ p.last }}
          </div>

          {% if p.first == 'Occasion' %}
          <textarea id="{{ item.product_id }}-{{ p.first | handleize }}-textarea" class="update-textarea autosize occasion-new-property">{{ p.last }}</textarea>

          {% elsif p.first == 'Additional Comments' %}
          <textarea id="{{ item.product_id }}-{{ p.first | handleize }}-textarea" class="update-textarea autosize additional-comments-new-property">{{ p.last }}</textarea>

          {% elsif p.first == 'Enclosed Card' %}
          <textarea id="{{ item.product_id }}-{{ p.first | handleize }}-textarea" class="update-textarea autosize enclosed-card-new-property">{{ p.last }}</textarea>
          {% endif %}

          <div class="cart-line-item-btns">
            <a class="cart-item-remove cart-line-item-edit" title="Edit content">Edit</a>
            <a class="cart-item-remove cart-line-item-update" title="Save changes" data-index="{{loop_index}}">Update</a>
          </div>

        </div>
      </div>
    {% endunless %}
  {% endfor %}
{% endif %}

And calling each textarea with a unique class name:

$('.cart-line-item-update').on('click', function() {
  const $this = $(this);
  const dataIndex = $this.data('index');
  const item = cart_items[dataIndex - 1];
  item.properties['Occasion'] = $('.occasion-new-property').val();
  item.properties['Additional Comments'] = $('.additional-comments-new-property').val();
  item.properties['Enclosed Card'] = $('.enclosed-card-new-property').val();
  jQuery.ajax({
    url: '/cart/change.js',
    dataType: 'json',
    data: {
      line: dataIndex,
      properties: item.properties
    }
  }).done(function() {
    window.location.reload()
  })
});

But I can’t seem to identify each cart item by it’s own unique id so that I can target the textareas for them and not apply them for every item with that class name. I’ve tried ids as well, but that doesn’t work. Is there a way to call a specific id for each item and then reference that in the javascript so I can target each set of textareas for each id?

Hope I’m making sense. Any help would be appreciated.

Thanks!

2