Post Selected Search Values

[Adamhumbug]

Hi, I have a form for news articles.  It has a title and a body which is fine.  I also have a search box that allows the user to search for a memeber and click their name when it appears.  This moves a div with a data-id into another div.  The purpose of this is to tag them in the article.

I am able to post all of the simple stuff but how would i post these value.  I am assuming that i would need to create an array of said values but i am struggling to get them showing in post at all.

Here is the code i have so far

<?php

function searchForPeople($searchVal, $exclude = '0'){

	$sv1 = $searchVal;
	$sv2 = $searchVal;

	include 'includes/dbconn.php';
	$out ="";

	$stmt = $conn -> prepare("
	                         SELECT fname, lname, id
	                         FROM person 
	                         WHERE id NOT IN (".implode(',', array_map('intval', $exclude)).") 
	                         AND (fname LIKE CONCAT('%',?,'%') OR lname LIKE CONCAT('%',?,'%'))
	                         ");
	$stmt -> bind_param('ss', $sv1, $sv2);
	$stmt -> execute();
	$stmt -> bind_result($fn, $ln, $pid);

	while($stmt -> fetch()){
		$out .= "<div class='btn btn-primary m-1 tagInArticle' name='taggedPerson[]' data-id='$pid'>$fn $ln</div>";
	}

	return $out;
}

?>

		......
							<div id="searchResultsHere">
								<!-- ajax content here -->
							</div>
							<hr>
							<div id="taggedInArticleContainer">
								<!-- ajax content here -->
							</div>
		.......


						<div class="col-lg-2">
							<button type="submit" name="PublishNewNews" class="btn btn-primary w-100 mb-3">Publish</button>
							<button class="btn btn-primary w-100">Save</button>
							<hr>
							<div class="btn btn-warning w-100 mb-3">Private</div>
							<input type="hidden" name="howVisible" value="Private">
							<hr>
							<p class="text-justify">Private news articles will only be avilable to logged in users</p>
						</div>

		.......



<script>

	$('#searchResultsHere').on('click', '.tagInArticle', function tagInArticle(){
		var tagButton = $(this);
		tagButton.appendTo('#taggedInArticleContainer')
	});

	$('#searchForPeopleBox').keyup(function(){
		var searchVal = $(this).val()
		var tagged = '0'
		var tagged = $('#taggedInArticleContainer').find('.tagInArticle').map(function(){
		 return $(this).data('id');
  		}).get();
		$.ajax({
			type: 'post',
			data: {"ajax" : 'one', "val" : searchVal, "exclude" : tagged},
			success: function(resp){
				$('#searchResultsHere').html(resp)
			}
		})
	});

	


</script>

I hope this is enough to go on.

I am sure it is simple but i just cant get it.

Thanks all in advance.

[Adamhumbug]

I think i am getting pretty close.

I have added a text field that i am trying to append the ids to to give me an array of linked people.

Issue is, its overwriting not appending.

This is jq

$('#peopleLinkedToArticle').append().val(taggedPerson+',') 

this forms part of the selection process shown below.

$('#searchResultsHere').on('click', '.tagInArticle', function tagInArticle(){
		var tagButton = $(this);
		var taggedPerson = $(this).data('id')
		$('#peopleLinkedToArticle').val(taggedPerson+',') 
		tagButton.appendTo('#taggedInArticleContainer')
		$('#searchForPeopleBox').val('')
	});

 

[Adamhumbug]

The following allowed me to create an array that is seen by post

 

$('#searchResultsHere').on('click', '.tagInArticle', function tagInArticle(){
		var tagButton = $(this);
		var taggedPerson = $(this).data('id')
		$('#peopleLinkedToArticle').val($('#peopleLinkedToArticle').val()+taggedPerson+',')
		tagButton.appendTo('#taggedInArticleContainer')
		$('#searchForPeopleBox').val('')
		$('#searchForPeopleBox').focus();
	});