Определение того, какой элемент был выбран из динамически созданной формы в WordPress / Stack Overflow

После лучшего понимания кода после некоторых исследований я задаю еще один вопрос.

У меня есть динамически сгенерированная форма, код показан ниже:

function prepareBlocksHtml_()
{
$class = new Graffitiwall();
$data = $class->getBlocks();

/* Get the current orderID */
$orderid = get_last_order_id();

echo "The Latest Order ID is ";
echo $orderid;


$html = '<table width="100%" border="0">
<thead>
<tr>
<th>Block</th>
<th>OrderID</th>
<th>Status</th>
<th>Image</th>
<th>Destination</th>
<th>Expiry</th>
<th>Options</th>
</tr>
</thead>';
$count = 1;
if(count($data) == 0)
{
return "<div class='alert alert-warning' >Your blocks are not active yet, or you have not purchased any blocks yet.</div>";
}
foreach($data as $block)
{

if($block->status == 0)
{
$block->status = "Pending Approval";
}
else
{
$block->status = "Active";
}

$fields = array();
$fiedls['orderid'] = $block->orderid;
$fields['destination'] = $block->destination;
$fields['tagline'] = $block->tagline;
$fields['image'] = $block->image;
$fields['id'] = $block->id;

$fields = json_encode($fields);

$settings = $block->permissions;
$html .= '<tr id=block_"'.$block->id.'">';

/* add order ID PC 14-8-2018 */


$html .= '<td>'.$count.'</td>';
$html .= '<td>'.$block->orderid.'</td>';
$html .= '<td>'.$block->status.'</td>';
$html .= '<td><img style="max-width: 61px" class="img-responsive " src="'.$block->image.'" </td>';
$html .= '<td>'.$block->destination.'</td>';
$html .= '<td>'.$block->expiry.'</td>';


$html .= '<td><button class="edit" onclick="showModal(\''.$block->userid.'\',\''.base64_encode($settings).'\',\''.base64_encode($fields).'\')">Edit</button></td>';

$html .= '</tr>';
$count ++;

}

$html .='</table>';
return $html;

}

Код извлекает данные из таблицы и показывает список заказов и данные, связанные с каждым из них. Затем код вызывает функцию ShowModal, которая отправляет пользователя и данные для каждой строки с выделенной здесь кнопкой EDIT:

$html .= '<td><button class="edit" onclick="showModal(\''.$block->userid.'\',\''.base64_encode($settings).'\',\''.base64_encode($fields).'\')">Edit</button></td>';

Это вызывает функцию в моем файле main.js с именем showModal, как показано здесь

function showModal(user,settings,data)
{
jQuery("#uploadBox, #selectBox, #labelurl, #url").hide();

jQuery("#editListing").modal();

settings = JSON.parse(atob(settings));
data = JSON.parse(atob(data));


if(typeof(settings.custom_logo) !== 'undefined' && settings.custom_logo === true)
{
jQuery("#uploadBox").show();
}
if(typeof(settings.badge) !== 'undefined' && settings.badge === true)
{
jQuery("#selectBox").show();
}
if(typeof(settings.link) !== 'undefined' && settings.link === true)
{
jQuery("#labelurl, #url").show();
}


// this is where data is passed to the showModal
// add in orderid mapping to ordid

jQuery("#ordid").val(data.orderid);

jQuery("#url").val(data.destination);
jQuery("#tooltip").val(data.tagline);
jQuery("#rid").val(data.id);
jQuery("#blockImage").attr('src',data.image);

jQuery('#editListing').modal('show');


}

Затем это вызывает код для отображения формы:

<div id="editListing" class="modal fade" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Edit Block</h4>

</div>
<div class="modal-body">
<form id="editingForm" enctype="multipart/form-data">

<!-- Added label for Order ID -->
<label id="labelorderid" class="" style="display: none">Order ID</label>
<input id="ordid" name="ordid" style="display: none;" class="form-control" placeholder="Order ID" />

<label id="labelurl" class="" style="display: none">Destination Url with http://</label>
<input id="url" name="url" style="display: none;" class="form-control" placeholder="Destination URL with http://" />

<label class="">Strapline</label>
<input id="tooltip" name="tooltip" class="form-control" placeholder="Strapline" />
<label class="">Images</label>
<div id="uploadBox" class="row" style="display: none;">

<div class="col-lg-2">
<img id="blockImage" src="" class="img-responsive zoom" />
</div>
<div class="col-lg-10">
<input id="imageFile" name="imageFile" type="file" class="">
</div>
</div>

<!-- Changed the value of selection - starting at 0 instead of 1 -->

<div id="selectBox" class="row" style="display: none">
<p>Stickers are currently free to change</p>
<select id="stickers">
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/001.jpg' value='0'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/002.jpg' value='1'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/003.jpg' value='2'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/004.jpg' value='3'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/005.jpg' value='4'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/006.jpg' value='5'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/007.jpg' value='6'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/008.jpg' value='7'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/009.jpg' value='8'>
<option data-img-src='/wp-content/plugins/graff/public/images/stickers/010.jpg' value='9'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/011.jpg' value='10'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/012.jpg' value='11'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/013.jpg' value='12'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/014.jpg' value='13'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/015.jpg' value='14'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/016.jpg' value='15'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/017.jpg' value='16'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/018.jpg' value='17'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/019.jpg' value='18'>
<option data-img-src=../wp-content/plugins/graff/public/images/stickers/020.jpg' value='19'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/021.jpg' value='20'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/022.jpg' value='21'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/023.jpg' value='22'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/024.jpg' value='23'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/025.jpg' value='24'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/026.jpg' value='25'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/027.jpg' value='26'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/028.jpg' value='27'>

</select>

</div>

<input id="rid" name="rid" type="hidden">
</form>

</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="saveBlockData()">Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>

</div>
</div>

Я заметил, как функция ShowModal передает параметры в код генерации формы, поэтому я включил OrderID.

Однако код, который я добавил в форму для отображения orderid, не работает. Я просто скопировал и вставил из одного из других и изменил его. Он не отображает метку поля ввода.

Как правильно отобразить значение OrderID? Если я могу заставить это работать, я могу передать это функции, которая обновляет таблицу.