I have a textarea that I want to show/hide when ever I click a button
and also I need it to target this way because ill be using it in an undefined number of times

SAMPLE IMAGE HERE

SAMPLE IMAGE HERE

here is the HTML that I want to

<div class="input-group mb-3">
    <input type="text" name="tname[]" class="form-control" required placeholder="req. for">
    <button class="btn btn-outline-secondary buttonMultipleNameReq" type="button" id="button-addon2"><i class="bi bi-plus-circle"></i></button>
</div>
<textarea class="form-control" id="multipleNameReq"></textarea>
                

and here is the script I try to use hiding/Showing it

$('body').on('click', '.buttonMultipleNameReq',function(){
    const element1 = $(this);
    const target1 = element1.parent().parent().find("#multipleNameReq");
    console.log(target1);

    if (target1.style.display === "none") {
    target1.style.display = "block";
    } else {
    target1.style.display = "none";
    }
})

>Solution :

To access and change the style of an element you need to use the css function.

$('body').on('click', '.buttonMultipleNameReq', function() {
  const element1 = $(this);
  const target1 = element1.parent().parent().find("#multipleNameReq");
  if (target1.css('display') === "none") {
    target1.css('display', "block");
  } else {
    target1.css('display', "none");
  }
})

<div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <div class="input-group mb-3">
    <input type="text" name="tname[]" class="form-control" required placeholder="req. for">
    <button class="btn btn-outline-secondary buttonMultipleNameReq" type="button" id="button-addon2">Click<i class="bi bi-plus-circle"></i></button>
  </div>
  <textarea class="form-control" id="multipleNameReq" style="display: block;"></textarea>
</div>