jQuery newsticker add new list onclick not working properly

Question

I'm using this plugin, Acmeticker.

It's working good. Now I tried to add more list using button .add to add Breaking News 9 at the last of ul. But it's not working as expected. It show together with another li if I click button add, and if I click button more than one it show me duplicate Breaking News 9.

$('.my-news-ticker-3').AcmeTicker({         type:'typewriter',/*horizontal/horizontal/Marquee/type*/
            direction: 'right',/*up/down/left/right*/
            speed:50,/*true/false/number*/ /*For vertical/horizontal 600*//*For marquee 0.05*//*For typewriter 50*/
            controls: {
                prev: $('.acme-news-ticker-prev'),/*Can be used for horizontal/horizontal/typewriter*//*not work for marquee*/
                toggle: $('.acme-news-ticker-pause'),/*Can be used for horizontal/horizontal/typewriter*//*not work for marquee*/
                next: $('.acme-news-ticker-next')/*Can be used for horizontal/horizontal/marquee/typewriter*/
            }
        });


$('.add').on('click', function()
{
  $(".my-news-ticker-3").append('<li><a href="#">Breaking News 9</a></li>');
});

<link href="https://www.jqueryscript.net/demo/news-ticker-controls-acme/assets/css/style.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/news-ticker-controls-acme/assets/js/acmeticker.js"></script>

<h2>Typewriter</h2><div class="acme-news-ticker">
    <div class="acme-news-ticker-label">Horizontal News</div>

    <div class="acme-news-ticker-box">
        <ul class="my-news-ticker-3">
            <li><a href="#">Breaking News 1</a></li>
            <li><a href="#">Breaking News 2</a></li>
            <li><a href="#">Breaking News 3</a></li>
            <li><a href="#">Breaking News 4</a></li>
            <li><a href="#">Breaking News 5</a></li>
            <li><a href="#">Breaking News 6</a></li>
            <li><a href="#">Breaking News 7</a></li>
            <li><a href="#">Breaking News 8</a></li>
        </ul>

    </div>
    <div class="acme-news-ticker-controls acme-news-ticker-horizontal-controls">
        <span class="acme-news-ticker-arrow acme-news-ticker-prev"></span>
        <span class="acme-news-ticker-pause"></span>
        <span class="acme-news-ticker-arrow acme-news-ticker-next"></span>
    </div>
    
<button class="add">Add</button>

Answer 1

This plugin adds style i.e :display: none; opacity: 0; to each lis dynamically so when you append new lis you can add this to your li.Also , when you use .append() this will not append lis after Breaking news 8 because position of lis are getting change so to append new lis only after last li you can use data-attr which will helps us to find last li and append new li after that .

Demo Code :

$('.my-news-ticker-3').AcmeTicker({
  type: 'typewriter',
  direction: 'right',
  speed: 50,
  controls: {
    prev: $('.acme-news-ticker-prev'),
    toggle: $('.acme-news-ticker-pause'),
    next: $('.acme-news-ticker-next')
  }
});


$('.add').on('click', function() {
  var lengths = $(".my-news-ticker-3 li").length + 1 //get length of lis
  //get refrence of last lis
  var get_reference = $(".my-news-ticker-3 li[data-ids=" + $(".my-news-ticker-3 li").length + "]")
  //insert new lis 
  $(`<li style="display: none; opacity: 0;" data-text="Breaking News ${lengths}" data-ids='${lengths}'><a href="#">Breaking News ${lengths}</a></li>`).insertAfter($(get_reference))

});

<link href="https://www.jqueryscript.net/demo/news-ticker-controls-acme/assets/css/style.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/news-ticker-controls-acme/assets/js/acmeticker.js"></script>

<h2>Typewriter</h2>
<div class="acme-news-ticker">
  <div class="acme-news-ticker-label">Horizontal News</div>

  <div class="acme-news-ticker-box">
    <ul class="my-news-ticker-3">
      <!--added ids to keep track-->
      <li data-ids='1'><a href="#">Breaking News 1</a></li>
      <li data-ids='2'><a href="#">Breaking News 2</a></li>
      <li data-ids='3'><a href="#">Breaking News 3</a></li>
      <li data-ids='4'><a href="#">Breaking News 4</a></li>
      <li data-ids='5'><a href="#">Breaking News 5</a></li>
      <li data-ids='6'><a href="#">Breaking News 6</a></li>
      <li data-ids='7'><a href="#">Breaking News 7</a></li>
      <li data-ids='8'><a href="#">Breaking News 8</a></li>
    </ul>

  </div>
  <div class="acme-news-ticker-controls acme-news-ticker-horizontal-controls">
    <span class="acme-news-ticker-arrow acme-news-ticker-prev"></span>
    <span class="acme-news-ticker-pause"></span>
    <span class="acme-news-ticker-arrow acme-news-ticker-next"></span>
  </div>

  <button class="add">Add</button>