jQueryで要素ごとに要素を選択するにはどうすればよいですか？

Question

私はvalue属性で要素を取得しようとしています。ここで

は、私が使用しているコードです -

jQuery(document).ready(function() { 
    jQuery('form input#attribute2').on('focus', function() { 
     var $this = jQuery(this); 
     var $valueofbox = $this.val(); 
     var $form = $this.closest('form'); 
     console.log($form); 
     console.log($valueofbox); 
     var $samebox = $form.find('input.rowvar2[value=$valueofthis]'); 
     console.log($samebox); 
    }); 
}); 

私は現在選択されている入力ボックスの値を入力フィールドを取得しようとしています。 私が使用している場合、このコードは動作します - 代わりに

$form.find('input.rowvar2[value=$valueofthis]'); 

または

$form.find('input.rowvar2[value=$this.val()]'); 

の

$form.find('input.rowvar2[value=XXL]'); //notice that the quotes are not required here and it still gets the desired element 

何がこの問題を解決するために、ここで行うことができますか？これを行うより良い方法はありますか？

HTMLコード -

<form role="form"> 
    <div class="col-xs-2"> 

     <label for="attribute2">Size</label> 

     <input type="text" class="form-control" id="attribute2" value="XXL"> 
     <br> 

     <input type="text" class="form-control" id="attribute2" value="M"> 
     <br> 

     <input type="text" class="form-control" id="attribute2" value="XXXL"> 
     <br> 

<div class="row"> 
<!-- some HTML --> 
    <div class="col-xs-3"> 
     <input type="text" class="form-control rowvar1 e27a8e79-ba6a-449f-a64b-e94baf1a098d" placeholder="Blue" disabled=""> 
    </div> 

    <div class="col-xs-2"> 

     <input type="text" class="form-control rowvar2" value="M" disabled=""> 
     <br> 

     <input type="text" class="form-control rowvar2" value="L" disabled=""> 
     <br> 

     <input type="text" class="form-control rowvar2" value="XL" disabled=""> 
     <br> 
    </div> 
</div> 
<!-- some html --> 

<div class="row"> 
<!-- some HTML --> 
    <div class="col-xs-3"> 
     <input type="text" class="form-control rowvar1 e27a8e79-ba6a-449f-a64b-e94baf1a098d" placeholder="Blue" disabled=""> 
    </div> 
    <div class="col-xs-2"> 

     <input type="text" class="form-control rowvar2" value="XL" disabled=""> 
     <br> 

     <input type="text" class="form-control rowvar2" value="XXL" disabled=""> 
     <br> 

     <input type="text" class="form-control rowvar2" value="XXXL" disabled=""> 
     <br> 

     <input type="text" class="form-control rowvar2" value="5XL" disabled=""> 
     <br> 
    </div> 
</div> 


    <button id="submittopost" type="Submit" class="btn btn-success pull-right">Publish Product</button> 
</form> 

Answer 1

私はJSのいずれかの空想の文字列の置換があると思ういけませんか？ただ、手動で連結

$form.find('input.rowvar2[value=' + $valueofbox + ']'); 

Answer 2

は、使用してみてください：

$form.find("input.rowvar2[value=${valueofbox}]");