如何创建文本输入弹出框

Question

I need to create a text input pop up box in my laravel application. See the codes below,

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

when I click

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

this button icon I need to generate text input pop up. How can I do this?

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+'">');
})

Note: 'any' is Where you want input to be inserted

JSFIDDLE DEMO