Tagify: jQuery - move tags from one component to another, on tag click

[Synchro]

I have two tagified inputs using jQuery. When I click a tag in one, I want it to be moved to the other (just in one direction), so I'm doing this in two steps:

1. add a tag to the other field using the value of the tag that was clicked
2. remove the clicked tag from the current field

I've got the first step working, but I can't find the target to delete the current tag. This is my code:

const tags = $('#tags').tagify();
$('#autotags')
    .tagify()
    .on('click', function (e, tagData) {
        tags.data('tagify').addTags(tagData.data.value); //This works fine
        tagData.data.removeTags(tagData.data.value); //This does not
    });

I've tried all kinds of targets but not found one that works. What should I be targeting?

[yairEO]

Here you go sir:

https://jsbin.com/zidupik/edit?html,js,output

[Synchro]

Perfect, thank you very much!

[yairEO]

Heureux de vous aider

[Synchro]

This is working visually, but the output is delivered as [{"value":"tag1"},{"value":"tag2"}] rather than tag1,tag2. I can see how to change the input format, but the docs seem to say output should look like the second pattern and I can't see an option to change it. I tried changing the script that adds tags from addTags([data]) to addTags(data.value), but that made no difference. I know I can parse and reformat it on the server side, but I'd prefer not to if I can avoid it! How can I get the simpler output format?

[yairEO]

See originalInputValueFormat in the docs's settings section

And another section in the docs explains how to use it:

https://github.com/yairEO/tagify#modify-original-input-value-format

[Synchro]

Oh, I see. I saw those docs but was confused by that as I was already giving it data in tag1,tag2 format successfully, but getting it back in the JSON format, so I was looking for something to change the output format rather than the input format and I was put off by the name of that property. Thanks.