javascript - 入力ボックス間でフォーカスを移動するときに、同じクラスの入力ボックスに対して readonly="false" を保持する方法は?

Question

ユーザーが入力ボックスからフォーカスを外すたびに、読み取り専用モードに切り替える必要があります。しかし、実行時に生成されたすべて同じクラスのテキスト ボックスがあり、ユーザーがそのテキスト ボックスのクラスを離れるまで、これらのテキスト ボックスが読み取り専用モードにならないようにしたいと考えています。しかし、一度にフォーカスできるテキスト ボックスは 1 つだけなので、同じクラスの他のテキスト ボックスは読み取り専用になってしまいます。

例えば。

<span id="file_div">
<?php foreach($arr as $skill) 
    {echo '<input readonly name="txtSkill[]" value="'.$skill.'" class="txt11"/>'; }?>
</span>
<input type="button" value="Edit" name="btnEdit11"id="btnXyz2" class="btn11"/>

<input readonly name="txtQualif" value="<?= $row[15];?>" class="txt12"/>
<input type="button" value="Edit" name="btnEdit12"id="btnXyz2" class="btn12"/>

<script>
$(".btn11").click(function(){
    $(".txt11").eq(0).focus(); // focus the first
    $(".txt11").prop("readonly", false);
});

$(".btn12").click(function(){
    $(".txt12").focus();
    $(".txt12").prop("readonly", false);
});

$(".txt11").focusout(function(){
    $(".txt11").prop("readonly", true);
});

$(".txt12").focusout(function(){
    $(".txt12").prop("readonly", true);
});
</script>

編集：

ユーザーが別のクラス名のテキストボックスをクリックするまで、「readonly = false」を緩めたくありません。上記の例では、ユーザーが txt11 という名前のクラス間をクリックしている限り、クラス名 txt11 のすべての texbox の readonly プロパティは readonly=false にする必要があります。ただし、ユーザーがクラス名 txt12 のテキスト ボックスをクリックすると、クラス名 txt11 のすべてのテキスト ボックスが読み取り専用に設定されます。