JSFiddle - React, Tailwind, and code Playground

HTML

<form id="myForm1" action="#" method="POST">
    <label>Input with "data-boolean" attribute (blank)</label>
    <input data-boolean name="name" type="text" placeholder="No jquery selection" />
</form>
<form id="myForm2" action="#" method="POST">
    <label>Input with "data-boolean" attribute (blank)</label>
    <input data-boolean name="name" type="text" placeholder="No jquery selection" />
</form>
<form id="myForm3" action="#" method="POST">
    <label>Input with "required" attribute (blank)</label>
    <input required name="name" type="text" placeholder="No jquery selection" />
</form>
<form id="myForm4" action="#" method="POST">
    <label>Input with "required" attribute (blank)</label>
    <input required name="name" type="text" placeholder="No jquery selection" /> &lt;-- Why is this one matched, but not the previous one?
</form>

JavaScript

$(document).ready(function() {
    $('[data-boolean="true"]', '#myForm1').filter(':visible').val('Found this input!');
    $('[data-boolean="true"]:visible', '#myForm2').val('Found this input!');
    
    $('[required="required"]', '#myForm3').filter(':visible').val('Found this input!');
    $('[required="required"]:visible', '#myForm4').val('Found this input!');
});