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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
2
Answers
Change your logic slightly
If you want to restrict duplicate entries
Calling button click event on keydown and clear input after successful addition
Remove div and value from array on .fa-trash-can click
Other way if you don’t want to use array (suggested by @Silvia Tacher )