JSFiddle - React, Tailwind, and code Playground

by Viruthagiri

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-modal.js"></script>
<script src="http://demos.9lessons.info/reCopy.js"></script>
<form>
    <div class="control-group success">
        <div class="controls">
            <p class="clone">
                <input type="text" name="name[]">
                <span class="help-inline">
                    <a class="select-name" href="#myModal">Select a name</a>
                </span>
            </p>
            <span class="help-inline">
                <a href="#" class="add" rel=".clone">Add More</a>
            </span>
        </div>
    </div>
</form>

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
           <div class="row-fluid">
            <ul class="thumbnails">
              <li class="span4">
                <div class="thumbnail">
                  <div class="caption">
                    <h3>Sam</h3>
                    <p><a href="#" data-value="Sam" class="btn btn-primary">Insert name</a></p>
                  </div>
                </div>
              </li>
              <li class="span4">
                <div class="thumbnail">
                  <div class="caption">
                    <h3>Linda</h3>
                    <p><a href="#" data-value="Linda" class="btn btn-primary">Insert name</a></p>
                  </div>
                </div>
              </li>
              <li class="span4">
                <div class="thumbnail">
                  <div class="caption">
                    <h3>Lucy</h3>
                    <p><a href="#" data-value="Lucy" class="btn btn-primary">Insert name</a></p>
                  </div>
                </div>
              </li>
              <li class="span4">
                <div class="thumbnail">
                  <div class="caption">
            ...

CSS

form {
margin: 0;
    margin-top:300px;
}
.remove {
color: #C00;
}

JavaScript

$(function() {
    var removeLink = ' <a class="remove" href="#" onclick="$(this).parent().slideUp(function(){ $(this).remove() }); return false">remove</a>';
    $('a.add').relCopy({
        append: removeLink
    });
    
    $('a.select-name').click(function() {
        $('#myModal').data('current-input', $(this));
        $('#myModal').modal('show');
    });

    $('#myModal .btn').click(function() {
        $('#myModal').data('current-input').closest('p').find(':text').val($(this).data('value'));
        $('#myModal').modal('hide');
    });
});