How to keep readonly="false" for input boxes with same class when moving focus between them?

Question

I want that whenever user focus out of a input box it should turn into readonly mode. But I have text boxes generated at runtime who all have same class and I want that these textboxes should not turn into readonly mode until user leaves that class of text box. But what is happening is that only one text box can have a focus at a time so other text boxes of that same class end up being readonly.

e.g..

<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>

EDIT:

I don't want to loose 'readonly=false' until user clicks a textbox of different class name. in above eg.. as long as user is clicking between class with name txt11, readonly property of all texboxes with class name txt11 should be readonly=false. But if user clicks at textbox with class name txt12 then all textboxes with class name txt11 will be set to readonly

Answer 1

Hope this JS Fiddle works for you to make the solution.

<input type="text" readonly="true" value="123" class="test" id="test"  /><br />
<input class="test" readonly="true" type="text" value="123" />
<button id="editClick">
 Edit
</button>

$("#editClick").on('click', function(){
 $('.test').attr('readonly', false);
});

Answer 2

You need to define focusout for each of the text input field, so whernever that particular input is focus out only it will be changed into raedonly mode

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