jquery powtarzający się kod dla wybranych operacji

Mam takie pytanie Miałem coś takiego, że był div i można było z poziomu pola textowego ukrywać nazwy akcji w zalęzności od wartości w polu tekstowym i teraz w obszarze całej strony był tylko jeden taki obiekt, ale aplikacja się powiększa i w teraz można edytować przez ajax inne obiekty i to nawzajem wchodzi w konfikt, może dam kod.

$(document).ready(function(){

     jQuery.expr[':'].contains = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};
    $("#hideActions").keyup( function(e) {
      if ($("#hideActions").val() == "") {
          $('.actionMain').show();
          return;
      }
        $('.actionMain').hide();
        var val = $.trim($("#hideActions").val());
        val = ".actionMain:contains("+val+")";
        $( val ).show();
      
    });
    $( ".message" ).prop( "disabled", true );
});

Tutaj jest dla ajaxa

                                        <div class='scroll' >
                                            <div id="parentsAction">
                                                <div >
                                                    <input type="text" id="hideActions" class='form-control'  >
                                                </div>
                                            
                                                 @foreach (\App\Models\Action::selectAction(Auth::User()->id)  as $list)
                                                 <div class="rowPercent">
                                                     @if ($val = \App\Models\Moods_action::selectValueActionForMood($idMood,Auth::User()->id,$list->id))
                                                     <script>
                                                            window.onload=selectedActionMainSetValue({{$list->id}},{{$loop->index}},{{$val->percent_executing}});
                

                                                    </script>
                                                       
                                                     @endif
                                                    <div class='actionMain'  id='divAction_{{$list->id}}' onclick='selectedActionMain({{$list->id}},{{$loop->index}})'>{{$list->name}}</div>
                                                    <div class="hiddenPercentExecuting centerPercent" id='divActionPercent_{{$list->id}}'>
                                                        <div style="display: inline-block; width: 40%;"><input type="number" class="percentExecuting form-control form-control-lg " title="procent wykonania" placeholder="procent wyk" id="percentExe_{{$loop->index}}" name="percentExe[]" min="1" max="100"></div>
                                                        <input type="hidden"  id='idAction' name="idActionss[]" value='NULL'>
                                                    </div>
                                                 </div>
                                                 @endforeach
                                            </div>
                                        </div>

A tutaj dla głównej strony.

                                            <div id="hideActions">
                                                <div >
                                                    <input type="text" id="hideActions" class='form-control'  >
                                                </div>
                                            
                                                 @foreach (\App\Models\Action::selectAction(Auth::User()->id)  as $list)
                                                 <div class="rowPercent">
                                                    <div class='actionMain'  id='divAction_{{$list->id}}' onclick='selectedActionMain({{$list->id}},{{$loop->index}})'>{{$list->name}}</div>
                                                    <div class="hiddenPercentExecuting centerPercent" id='divActionPercent_{{$list->id}}'>
                                                        <div style="display: inline-block; width: 40%;"><input type="number" class="percentExecuting form-control form-control-lg " title="procent wykonania" placeholder="procent wyk" name="percentExe[]" min="1" max="100"></div>
                                                        <input type="hidden"  id='idAction' name="idActionss[]" value='NULL'>
                                                    </div>
                                                 </div>
                                                 @endforeach
                                            </div>

I teraz Nazwy divów [hideActions] , [hideActions] są takie same jak by można było zrobić, żeby to nie wchodziło w konfikt jak zminieć nazwy tych divów, żeby ten kod był wspólny

```javascript
$(document).ready(function(){

     jQuery.expr[':'].contains = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};
    $("#hideActions").keyup( function(e) {
      if ($("#hideActions").val() == "") {
          $('.actionMain').show();
          return;
      }
        $('.actionMain').hide();
        var val = $.trim($("#hideActions").val());
        val = ".actionMain:contains("+val+")";
        $( val ).show();
      
    });
    $( ".message" ).prop( "disabled", true );
});

Z tego co ja widzę, to dwa inputy, oraz jeden div mają id, a nie klasę "hideActions". Poza tym w kodzie widzę, że jest używany selector ze znakiem "#" czyli selektor id.

Po pierwsze id powinno być unikalne w skali dokumentu, zatem musisz poprawić id, tak aby dla każdego inputa było inne, wtedy selector będzie zwracał poprawny element i nie będzie wchodziło w konflikt. Po drugie musisz skopiować kod jquery $("#hideActions").keyup( function(e) (lub zrefaktorować tak żeby był generyczny) tak aby obsługiwał te inne, zmienione id.

Po trzecie jest XXI wiek i być może nadszedł czas zaprzestania używania jquery?