Jquery - Add Bullet Points After Line Break

Question

I have a textarea that when you add contents, it automatically add bullet points, the problem is when a new line is added it should add separate ullet points. The problem is its appending the content altogether

Here is how am I adding the content

It should look like this

Here is the Snippet

$(function(){
    $('#getvalue').click(function(){
        // Get the text area value
        var textarea_value = $('#textarea').val();
        
        // Get a jQuery object of the template html
        var templateHolder = $($('#template3').html());
        
        // Put the text area text inside of the template's <p> tag 
        // Use .html() to overwrite the old content with the new 
        // content every time
        templateHolder.find('p').html(textarea_value);
        
        // Get a reference to the <ul> element
        var $btext = $('.popupbtext');
        
        // Add the template (with text area text) to the <ul> element
        $btext.append(templateHolder);
        
        // Commented out because it was throwing errors.  
        // Left in because it was part of original fiddle
        //$('.jcarouselbtext').jcarousel('reload', {
        //    animation: 'slow'
        //});
    }); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<textarea id="textarea"></textarea>
<br/>
<input type="button" id="getvalue" value="Send text" class="demobutton">
        
<div class="jcarouselbtext"  data-jcarousel="true">
    <ul  class="popupbtext">
        <li>
            <p  class="info1">First bullet point</p>
        </li>
    </ul>
</div>
    
<script id="template3" type="text/template">
     <li>
         <p  class="info1 show-textarea-value"></p>
     </li>
</script>

Answer 1

Try splitting the text based on new line and add them as new list item to your popupbtext element

$(function(){
    $('#getvalue').click(function(){
        // Get the text area value
        var textarea_value = $('#textarea').val();
        
        var lines = textarea_value.split('\n'); //Split the text content based on new line and iterate through each line then add them as seperate list item
        
        lines.forEach(function(line){
        
        // Get a jQuery object of the template html
        var templateHolder = $($('#template3').html());
        
        // Put the text area text inside of the template's <p> tag 
        // Use .html() to overwrite the old content with the new 
        // content every time
        templateHolder.find('p').html(line);
        
        // Get a reference to the <ul> element
        var $btext = $('.popupbtext');
        
        // Add the template (with text area text) to the <ul> element
        $btext.append(templateHolder);
        
        });
        

        
        // Commented out because it was throwing errors.  
        // Left in because it was part of original fiddle
        //$('.jcarouselbtext').jcarousel('reload', {
        //    animation: 'slow'
        //});
    }); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<textarea id="textarea"></textarea>
<br/>
<input type="button" id="getvalue" value="Send text" class="demobutton">
        
<div class="jcarouselbtext"  data-jcarousel="true">
    <ul  class="popupbtext">
        <li>
            <p  class="info1">First bullet point</p>
        </li>
    </ul>
</div>
    
<script id="template3" type="text/template">
     <li>
         <p  class="info1 show-textarea-value"></p>
     </li>
</script>