Cacher is the code snippet organizer for pro developers

<mvt:assign name="l.settings:basketnotes" value="''" />

<mvt:comment>READ NOTES BASKET FIELD</mvt:comment>
<mvt:item name="customfields" param="Read_Basket( 'basket_notes', l.settings:basketnotes )" />

<mvt:comment>LOOP THROUGH PRODUCTS IN CART AND ADD EMPTY NOTES IF NONE EXIST</mvt:comment>
<mvt:assign name="l.settings:notelist" value="miva_array_deserialize( l.settings:basketnotes )" />
<mvt:foreach iterator="prod" array="basket:groups">
  <mvt:assign name="g.count" value="POS1" />
  <mvt:if expr="miva_element_exists( l.settings:notelist, g.count ) EQ 0">
    <mvt:assign name="l.null" value="miva_array_insert( l.settings:notelist, ' ', g.count )" />
  </mvt:if>
  <mvt:item name="customfields" param="Write_Basket( 'basket_notes', l.settings:notelist )" />
</mvt:foreach>

<mvt:comment>REMOVE NOTE WHEN PRODUCT IS REMOVED FROM CART</mvt:comment>
<mvt:if expr="g.Action EQ 'RGRP'">
  <mvt:assign name="l.settings:notelist" value="miva_array_deserialize( l.settings:basketnotes )" />
  <mvt:assign name="l.null" value="miva_array_delete( l.settings:notelist, g.Product_Pos, 1 )" />
  <mvt:item name="customfields" param="Write_Basket( 'basket_notes', l.settings:notelist )" />
</mvt:if>

<mvt:comment>ADD NOTE CONTENT</mvt:comment>
<mvt:if expr="g.addnote">
  <mvt:assign name="l.settings:notelist" value="miva_array_deserialize( l.settings:basketnotes )" />
  <mvt:assign name="l.null" value="miva_array_delete( l.settings:notelist, g.pos, 1 )" />
  <mvt:assign name="l.null" value="miva_array_insert( l.settings:notelist, g.addnote, g.pos )" />
  <mvt:item name="customfields" param="Write_Basket( 'basket_notes', l.settings:notelist )" />
</mvt:if>

<mvt:comment>EDIT NOTE CONTENT</mvt:comment>
<mvt:if expr="g.editnote">
  <mvt:assign name="l.settings:notelist" value="miva_array_deserialize( l.settings:basketnotes )" />
  <mvt:assign name="l.null" value="miva_array_delete( l.settings:notelist, g.pos, 1 )" />
  <mvt:assign name="l.null" value="miva_array_insert( l.settings:notelist, g.editnote, g.pos )" />
  <mvt:item name="customfields" param="Write_Basket( 'basket_notes', l.settings:notelist )" />
</mvt:if>

<mvt:comment>READ NOTES BASKET FIELD</mvt:comment>
<mvt:item name="customfields" param="Read_Basket( 'basket_notes', l.settings:basketnotes )" />

<mvt:comment>Creat javascript array of notes for later use</mvt:comment>
<script>
var contentList = [];
<mvt:assign name="l.settings:notelist" value="miva_array_deserialize( l.settings:basketnotes )" />
<mvt:foreach iterator="note" array="notelist">
  contentList.push("&mvt:note;");
</mvt:foreach>
</script>

<div class="reveal" id="addNoteModal" data-reveal>
  <form action="&mvt:urls:self:auto;" method="post">
    <div class="note-heading">Add Note</div>
    <div class="note-prod"></div>
    <input type="hidden" name="pos" value />
    <textarea id="addnote" name="addnote"></textarea>
    <div class="note-bottom">
      <button class="button notesubmit" data-close aria-label="Close modal" type="submit">Save</button>
      <a class="remove-note">Delete</a>
    </div>
  </form>
</div>

<div class="reveal" id="editNoteModal" data-reveal>
  <form action="&mvt:urls:self:auto;" method="post">
    <div class="note-heading">Edit Note</div>
    <div class="note-prod"></div>
    <input type="hidden" name="pos" value />
    <textarea id="editnote" name="editnote"></textarea>
    <div class="note-bottom">
      <button class="button notesubmit" data-close aria-label="Close modal" type="submit">Save</button>
      <a class="remove-note">Delete</a>
    </div>
  </form>
</div>

// ---- Add Note ---- //
$(".add-note").click(function(){
	var targetModal = $('#' + $(this).data('open'));
	var prodName = $(this).data('prod');
	var notePos = $(this).data('pos');

	targetModal.find(".note-prod").text(prodName);
	targetModal.find("input[name='pos']").val(notePos);
});

// ---- Edit Note ---- //
$(".edit-note").click(function(){
	var targetModal = $('#' + $(this).data('open'));
	var prodName = $(this).data('prod');
	var notePos = $(this).data('pos');
	var notePosAdj = notePos-1;
	
	targetModal.find(".note-prod").text(prodName);
	targetModal.find("input[name='pos']").val(notePos);
	$("#editnote").val(contentList[notePosAdj]);
});

// ---- Remove Note ---- //
$(".remove-note").click(function(){
	var targetModal = $('#' + $(this).data('open'));
	var notePos = $(this).data('pos');
	var notePosAdj = notePos-1;
	targetModal.find("input[name='pos']").val(notePos);
	$("#editnote").val(' ');
	$(this).parent('form').submit();
});		

<mvt:assign name="l.settings:basketnotes" value="''" />

<mvt:comment>READ NOTES BASKET FIELD</mvt:comment>
<mvt:item name="customfields" param="Read_Basket( 'basket_notes', l.settings:basketnotes )" />
<mvt:assign name="l.settings:notelist" value="miva_array_deserialize( l.settings:basketnotes )" />

<mvt:if expr="l.settings:notelist[POS1] NE ' '">
  <div class="cart-item-note"><a data-open="editNoteModal" data-pos="<mvt:eval expr="POS1" />" data-prod="&mvt:group:name;" class="edit-note">Edit Note</a></div>
<mvt:else>
  <div class="cart-item-note"><a data-open="addNoteModal" data-pos="<mvt:eval expr="POS1" />" data-prod="&mvt:group:name;" class="add-note">Add Note</a></div>
</mvt:if>