JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<ul id="productList"></ul>

JavaScript

var data = [
	{ productId: 101, name: 'Product 1' },
	{ productId: 102, name: 'Product 2' },
	{ productId: 103, name: 'Product 3' }
];//data

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

	var DOMStr = ''; 

  $.each( data, function( key, val ) {

		DOMStr += '<li><a href="invoice.php?id=' + val.productId + '" class="invLink" data-val="' + val.productId + '">' + val.name + '</a></li>';
  });//each
  
  $('#productList').append( DOMStr ); 
  
  // capture click, prevent default, send POST
  $('.invLink').click( handleInvoiceClick );
  
});

function handleInvoiceClick( evt ) {

  // prevent anchor from auto-following by default
  evt.preventDefault(); 

  // POST data
  var postData = { 
    id: $( evt.currentTarget ).attr('data-val'),
    // more stuff
  };
  
  // verify
  console.log(postData);
  
  // send POST
  //$.post( 'invoice.php', postData, function( responseObj ) {
  	// check responseObj here
  //} );
};