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

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 ><i ></i><p></p><i ></i></div>');
        $(".pros-print").children("p").text($("#pros-input").val());
      });
      
    });

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

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

<div >

 <input 
 type="text" 
 name="user-pros" 
 id="pros-input"
 
 placeholder="pros" 
 aria-label="Username"
 aria-describedby="basic-addon1">
 
 <button 
 
 id="basic-addon1">add
 </button>
 </div>
 
 <div >
  <div >
     <div >
        <p > 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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

CodePudding user response：

$(document).ready(function() {
  var prosinput = $("#pros-input").val();
  $("#basic-addon1").click(function() {
    prosinput = $("#pros-input").val();
    var exists_already = $(".pros-print p:contains('"   prosinput   "')").length > 0;
    if (exists_already) return false;
    $(".right-side-pros").append('<div ><i ></i><p>'   prosinput   '</p><i ></i></div>');
  });

});

CodePudding user response：

Change your logic slightly

$(document).ready(function () {
      var prosinput = $("#pros-input").val();
      $("#basic-addon1").click(function () { 
        $(".right-side-pros").append('<div ><i ></i><p>' $("#pros-input").val() '</p><i ></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 ><i ></i><p>' prosVal '</p><i ></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 ><i ></i><p>' prosVal '</p><i ></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 ><i ></i><p>' prosVal '</p><i ></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 ><i ></i><p>' prosVal '</p><i ></i></div>');
         $("#pros-input").val("");
    });
});