Show Hide Input element on Reapeater based on selection-CodePudding

I want to create show input element using jquery after selected dropdown and show the input element in repeater but the problem I only show the input element in one input element, Thanks for your help.

This is html code form repeater

 <tbody>
      @foreach($siswas as $key => $nilai)
          <tr>
              <td><input type="text"  id="nilai_sikap" name="nilai_sikap[]"></td> 
          </tr>
      @endforeach
 </tbody>

This is script to show and hide input element in id="nilai_sikap"

    $('#mapel_id').on('change', function() {
      if ( this.value == 17 || this.value == 18)
        $("#nilai_sikap")[$i].show();  
      else
        $("#nilai_sikap").hide();
    }).trigger("change")

From this I only get one input element like this enter image description here

but I want show input element in every row like this enter image description here

CodePudding user response：

There are multiple issues with this code that I can see. First, you are creating multiple duplicate ids with the foreach. this is bad practice, but not code breaking in itself. But I suggest you remove the id attribute completely. Also, where is the $i coming from?

Secondly where you are going wrong is the selector. You are selecting the items by their id. To select an item by the name attribute, you need to select it like this.

$('input[name="nilai_sikap[]"]')

In short, your code should be:

$('#mapel_id').on('change', function() {
      if ( this.value == 17 || this.value == 18)
        $('input[name="nilai_sikap[]"]').show();  
      else
        $('input[name="nilai_sikap[]"]').hide();
    }).trigger("change")

CodePudding user response：

Try this solution

 <tbody>
      @foreach($siswas as $key => $nilai)
          <tr>
              <td><input type="text"  name="nilai_sikap[]"></td> 
          </tr>
      @endforeach
 </tbody>

Change js code as per below

$('#mapel_id').on('change', function() {
    if ($(this).val() == 17 || $(this).val() == 18){
        $(document).find('._my_input').show();  
    } else {
        $(document).find('._my_input').hide();         
    }
})