テキスト入力ポップアップボックスの作成方法

Question

私のlaravelアプリケーションにテキスト入力ポップアップボックスを作成する必要があります。私は

<a href="" class="editInline"><i class="glyphicon glyphicon-plus"></i></a> 

私はテキスト入力ポップアップを生成する必要があり、このボタンのアイコンをクリックすると、以下のコード

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

@foreach ($project->tasks as $task) 
    <ul> 
    <li> 
    <div> 
    <div class="pull-right icons-align"> 
      <a href="" class="editInline"><i class="glyphicon glyphicon-plus"></i></a> 
      <a href="" class="editInline"><i class="glyphicon glyphicon-pencil"></i></a> 
      <a href="" class="editInline"><i class="glyphicon glyphicon-trash"></i></a> 
     </div> 
    <h4><a href="/projects/{{$project->id}}/tasks/{{ $task->id }}">{{ $task->task_name }}</a></h4> 
</div> 
</li> 
</ul> 
    <hr> 
@endforeach 
</head> 
<script> 
$("a.editInline").css("display","none"); 

$('li').on('mouseover mouseout',function(){ 
    $(this).find('.editInline').toggle(); 
    //find the closest li and find its children with class editInLine and 
    //toggle its display using 'toggle()' 
}); 
</script> 
</body> 

を参照してください。これどうやってするの？

Answer 1

<a href="" class="editInline plusInput"><i class="glyphicon glyphicon-plus"></i></a> 

var count = 0; 
$('.plusInput').click(function(e){ 
e.preventDefault(); 
count++; 
$('any').append('<input type="text" value="Input '+count+'">'); 
}) 

注：入力は、私は、このポップアップコードを置くべき

JSFIDDLE DEMO