How to select ID’s with Jquery when a form is generated dynamically and we have block repeats

Question

I have a form that is generated dynamically by PHP with values coming from the database. In one part of the form I have a group of Infos that will generate a repetition of part of the form where I have a set of Buttons radios. I want that when the user chooses one of the two, hide one div and appear another. When I have only one block (loop) works the problem appears when I have more than one block in the loop. Follow PHP code and then the Jquery I did.

This is the block that the for loop generates.

<?php for ($i = 0; $i < $data['partsCount']; $i++) :
                ?>
                <div class="row">
                    <div class="col">
                        <div class="form-group">
                            <label for="service_id">Serviço</label>
                            <input type="text" class="form-control" name="service" value="<?=$data['services'][$i]->name; ?>" disabled />
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-group">
                            <label for="type_id">Tipo</label>
                            <input type="text" class="form-control" name="type" value="<?=$data['types'][$i]->name; ?>" disabled />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <div class="form-group">
                            <label for="amount">Quantidade</label>
                            <input type="number" name="amount" id="amount" class="form-control" value="<?=$data['parts'][$i]->amount; ?>" disabled />
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-group">
                            <label for="value">Valor Unitário</label>
                            <input type="text" name="value" id="value" class="form-control <?=(!empty($data['value_err'])) ? 'is-invalid' : ''; ?>" value="<?=$data['parts'][$i]->value; ?>" disabled />
                            <span class="invalid-feedback"><?=$data['value_err']; ?></span>
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-group">
                            <label for="value">Valor Total</label>
                            <input type="text" name="total" value="<?=$data['parts'][$i]->valueTotal; ?>" class="form-control" disabled />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <hr />
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <div class="custom-control custom-radio custom-control-inline">
                            <input type="radio" id="status1" name="status[]" class="custom-control-input" value="2" checked>
                            <label class="custom-control-label" for="status1">Aprovado</label>
                        </div>
                        <div class="custom-control custom-radio custom-control-inline">
                            <input type="radio" id="status2" name="status[]" class="custom-control-input" value="3">
                            <label class="custom-control-label" for="status2">Reprovado</label>
                        </div>
                    </div>
                </div>
                <div id="rejected-<?=$i; ?>" class="row my-4">
                    <div class="col">
                        <label for="desc">Motivo para a não aprovação do orçamento</label>
                        <textarea name="reject_notes[]" id="editor1" class="form-control form-control-lg <?=(!empty($data['text_err'])) ? 'is-invalid' : ''; ?>" cols="80" rows="10"></textarea>
                    </div>
                </div>
                <div id="accepted-<?=$i; ?>" class="row my-4">
                    <div class="col-4">
                        <label for="data_out">Data de Entrega</label>
                        <div class="form-group">
                            <div class="input-group input-group-lg date">
                                <input type="text" name="delivery_date[]" class="form-control datetimepicker-input" id="datetimepicker<?=$i; ?>" />
                                <div class="input-group-append">
                                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <label for="desc">Caminho para as artes</label>
                        <input type="text" class="form-control" name="path_files[]" id="">
                        <label for="desc">Caminho para a PM/RM</label>
                        <input type="text" class="form-control" name="path_pm[]" id="">
                        <label for="desc" class="mt-3">Descritivo e orientações de criação</label>
                        <textarea name="accept_notes[]" id="editor2" class="form-control form-control-lg <?=(!empty($data['text_err'])) ? 'is-invalid' : ''; ?>" cols="80" rows="10"></textarea>
                    </div>
                </div>
                <?php endfor;?>

As you can see, I have radio input which are status1 and Status2 (Approved and Disapproved) which this visible is div with id Accept, in case the user wants to disapprove the budget, I want div accepted to be Hide and show div with id Rejected.

Here is the Jquery

$('#status1').click(function () {
    $('div[id^="accepted"]').show('slow');
    $('div[id^="rejected"]').hide('slow');
  });

  $('#status2').click(function () {
    $('div[id^="accepted"]').hide('slow');
    $('div[id^="rejected"]').show('slow');
  });

As I said, when I have only 1 block works more when I have more than one it Uga, the blocks take the choice of other blocks. I’m not sure how to isolate the choice.

Answer 1

I managed to solve the problem I was having. I did so.

PHP block where you have all the functionality of choice that triggers the show/Hide

<div class="row">
   <div class="col">
      <div class="status-a custom-control custom-radio custom-control-inline">
      <input type="radio" id="status-a<?=$i?>" name="status-<?=$i?>[]" class="custom-control-input" value="2" checked>
      <label class="custom-control-label" for="status-a<?=$i?>">Aprovado</label>
      </div>
      <div class="status-b custom-control custom-radio custom-control-inline">
      <input type="radio" id="status-b<?=$i?>" name="status-<?=$i?>[]" class="custom-control-input" value="3">
      <label class="custom-control-label" for="status-b<?=$i?>">Reprovado</label>
      </div>
   </div>
   </div>
   <div id="rejected-<?=$i?>" class="row my-4">
      <div class="col">
      <label for="desc">Motivo para a não aprovação do orçamento</label>
      <textarea name="reject_notes[]" id="editor1" class="form-control form-control-lg <?php echo (!empty($data['text_err'])) ? 'is-invalid' : ''; ?>" cols="80" rows="10"></textarea>
      </div>
   </div>
   <div id="accepted-<?=$i?>" class="row my-4">
      <div class="col-4">
      <label for="data_out">Data de Entrega</label>
      <div class="form-group">
      <div class="input-group input-group-lg date">
      <input type="text" name="delivery_date[]" class="form-control datetimepicker-input" id="datetimepicker<?php echo $i; ?>" />
      <div class="input-group-append">
         <div class="input-group-text"><i class="fa fa-calendar"></i></div>
         </div>
      </div>
      </div>
      </div>
      <div class="col-12">
         <label for="desc">Caminho para as artes</label>
         <input type="text" class="form-control" name="path_files[]" id="">
         <label for="desc">Caminho para a PM/RM</label>
         <input type="text" class="form-control" name="path_pm[]" id="">
         <label for="desc" class="mt-3">Descritivo e orientações de criação</label>
         <textarea name="accept_notes[]" id="editor2" class="form-control form-control-lg <?php echo (!empty($data['text_err'])) ? 'is-invalid' : ''; ?>" cols="80" rows="10"></textarea>
      </div>
   </div>

First I created an input (Hidden) that passes the total value of the database return loop. And in the PHP loop I applied $i interaction value to create unique ID. Then I made a for loop with javascript and I was able to isolate the Ids to be selected.

Jquery code

let partsCount = document.getElementById('data-count').value;
  console.log(partsCount);
  for (let i = 0; i < partsCount; i++) {
    $('#status-a' + i).click(function () {
      $('#accepted-' + i).show('slow');
      $('#rejected-' + 1).hide('slow');
      console.log('Click: accepted-' + i);
    });

    $('#status-b' + i).click(function () {
      $('#accepted-' + i).hide('slow');
      $('#rejected-' + i).show('slow');
      console.log('Click: rejected-' + i);
    });
  }

Thank you all for your help.