How to create pros and cons form for users without repeating same value with jQuery

Issue

in this code when I enter a new value to the input box it will add and replace it for all P's tag. I want to change it like when I add new value for input and click the add button create a div with .pros-print class after each other but content of P tags be equal to new input value.

  $(document).ready(function () {
      var prosinput = $("#pros-input").val();
      $("#basic-addon1").click(function () { 
        $(".right-side-pros").append('<div class="pros-print d-flex align-items-center"><i class="fa-light fa-plus-large c-green me-2"></i><p></p><i class="fa-thin fa-trash-can ms-auto c-red me-2"></i></div>');
        $(".pros-print").children("p").text($("#pros-input").val());
      });
      
    });

.pros-cons-inputs-wrapper{
margin-top: 100px; 
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="pros-cons-inputs-wrapper input-group mb-3 d-flex justify-content-around">

 <input 
 type="text" 
 name="user-pros" 
 id="pros-input"
 class="form-control"
 placeholder="pros" 
 aria-label="Username"
 aria-describedby="basic-addon1">
 
 <button 
 class="input-group-text me-3"
 id="basic-addon1">add
 </button>
 </div>
 
 <div class="d-flex">
  <div class="right-side-pros">
     <div class="pros-print d-flex align-items-center ">
        <p class="pros-txt"> a </p>
     </div>
  </div>
</div>
              
              
              
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
 
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Solution

Change your logic slightly

$(document).ready(function () {
      var prosinput = $("#pros-input").val();
      $("#basic-addon1").click(function () { 
        $(".right-side-pros").append('<div class="pros-print d-flex align-items-center"><i class="fa-light fa-plus-large c-green me-2"></i><p>'+$("#pros-input").val()+'</p><i class="fa-thin fa-trash-can ms-auto c-red me-2"></i></div>');
      });
});

If you want to restrict duplicate entries

var prosarr = [];
    
$(document).ready(function () {
     var prosinput = $("#pros-input").val();
     $("#basic-addon1").click(function () { 
          let prosVal = $("#pros-input").val();
          if(prosarr.includes(prosVal)){
          return;
          }
          prosarr.push(prosVal);
          $(".right-side-pros").append('<div class="pros-print d-flex align-items-center"><i class="fa-light fa-plus-large c-green me-2"></i><p>'+prosVal+'</p><i class="fa-thin fa-trash-can ms-auto c-red me-2"></i></div>');
     });
});

Calling button click event on keydown and clear input after successful addition

var prosarr = [];
    
$(document).ready(function () {

    $("#pros-input").keydown(function(event){
        let keycode = (event.keyCode ? event.keyCode : event.which);
        if(keycode == '13') {
            $( "#basic-addon1" ).trigger( "click" );
        }
    });

     var prosinput = $("#pros-input").val();
     $("#basic-addon1").click(function () { 
          let prosVal = $("#pros-input").val();
          if(prosarr.includes(prosVal)){
          return;
          }
          prosarr.push(prosVal);
          $(".right-side-pros").append('<div class="pros-print d-flex align-items-center"><i class="fa-light fa-plus-large c-green me-2"></i><p>'+prosVal+'</p><i class="fa-thin fa-trash-can ms-auto c-red me-2"></i></div>');
         $("#pros-input").val("");
    });
});

Remove div and value from array on .fa-trash-can click

var prosarr = [];

$(document).ready(function () {
         
     $(".right-side-pros").on("click", ".fa-trash-can", function (event) {
        let parentVal = $(this).siblings('p').first().html();
        prosarr = prosarr.filter(function(item) {
                return item !== parentVal
                });
        $(this).parent().remove();
    });

    $("#pros-input").keydown(function(event){
        let keycode = (event.keyCode ? event.keyCode : event.which);
        if(keycode == '13') {
            $( "#basic-addon1" ).trigger( "click" );
        }
    });

     var prosinput = $("#pros-input").val();
     $("#basic-addon1").click(function () { 
          let prosVal = $("#pros-input").val();
          if(prosarr.includes(prosVal)){
          return;
          }
          prosarr.push(prosVal);
          $(".right-side-pros").append('<div class="pros-print d-flex align-items-center"><i class="fa-light fa-plus-large c-green me-2"></i><p>'+prosVal+'</p><i class="fa-thin fa-trash-can ms-auto c-red me-2"></i></div>');
         $("#pros-input").val("");
    });
});

Other way if you don't want to use array (suggested by @Silvia Tacher )

$(document).ready(function () {
         
     $(".right-side-pros").on("click", ".fa-trash-can", function (event) {
        $(this).parent().remove();
    });

    $("#pros-input").keydown(function(event){
        let keycode = (event.keyCode ? event.keyCode : event.which);
        if(keycode == '13') {
            $( "#basic-addon1" ).trigger( "click" );
        }
    });

     var prosinput = $("#pros-input").val();
     $("#basic-addon1").click(function () { 

          let prosVal = $("#pros-input").val();
          let exists_already = $(".pros-print p:contains('" + prosVal + "')").length > 0;
          if (exists_already) return false;

          $(".right-side-pros").append('<div class="pros-print d-flex align-items-center"><i class="fa-light fa-plus-large c-green me-2"></i><p>'+prosVal+'</p><i class="fa-thin fa-trash-can ms-auto c-red me-2"></i></div>');
         $("#pros-input").val("");
    });
});

Answered By - maddy23285