Need help removing one autocomplete and replacing with another

[Luke_4]

Trying to remove the autocomplete in this https://jsfiddle.net/59rphg1h/9/ and replace it with the autocomplete in this https://jsfiddle.net/mhxwcj7u/1/ and retain the ability to print the way the fist fiddle prints (Airshow's excellent work).
The reason is that the second fiddle has the ability to change the data (addins), and be be used multiple times on one page, which is what I need. Whereas the other doesn't (that I know of) which is not what I need.
Tried several variations but can't seem to make it work.
Thank you for your assistance.

[Luke_4]

I use to be able to grab my autocomplete div and place it where I want, add to it, take away from it and put them with other autocompletes without interference.
It's a simple div like this.

<div class="autocompleter">
    <script>autocompleter.addins = [{
        value: "sometimes",
        label: "Sometimes",
        desc: " stuff to addin",
    }, {
        value: "maybe",
        label: "Maybe",
        desc: " change or addin data",
    }, {
        value: "printable",
        label: "Printable",
        desc: " Put this autocomplete within the printable autocomplete.",
    }];
    </script>
    <label>Select an add-in:
        <input type=search placeholder="&#x1f50d; add in" name="addins" data-using="addins">
    <label>
    <p class="description">&nbsp;</p>
 </div>

The only thing I couldn't do, is see the selected data from my div print out at print time (at least by itself without the page).
I recieved a lot of great help getting an auto complete to print. Airshow was/is brilliant in the approach for printing the selected data! It works great, however, the autocomplete is not the same div anymore. It got changed. it's not versital like I need it to be.
So now it's back to trying variations of the css (now using Airshow's style) in hopes that I can use it with my original autocomplete div.
so far no luck.