tes

<!doctype html>
<html>
    <head>
        <title>testing</title>
        <link rel="stylesheet" href="bootstrap/css/bootstrap.css"/>
        <link rel="stylesheet" href="datatables/dataTables.bootstrap.css"/>
        <style>
            body{
                margin: 15px;
            }
            .pilih:hover{
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div class="row">
        </div>
        <form action="action" onsubmit="#">
            <div class="form-group">
                <table class="table table-bordered" id="dynamic_field">
                <tr>
                    <td><label for="varchar">Nama Peserta</label></td>
                </tr>
                <tr>
                    <td><input type="text" class="form-control" name="peseta[]" id="peserta1" placeholder="Kode Obat" readonly="" /></td>
                    <td><button type="button" id="1" class="btn btn-default klikmodal" data-toggle="modal" data-target="#myModal">. . .</button></td>
                    <td>
                        <button type="button" name="addPeserta" id="addPeserta" class="btn btn-success">Add More</button></td>
                </table>
            </div>

            <input type="submit" value="Simpan" class="btn btn-primary" />
        </form>

        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog" style="width:800px">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Lookup Peserta</h4>
                    </div>
                    <div class="modal-body">
                        <table id="lookup" class="table table-bordered table-hover table-striped">
                            <thead>
                                <tr>
                                    <th>Kode Pegawai</th>
                                    <th>Nama Pegawai</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php
                                $con = pg_connect('host=localhost dbname=db_surat user=postgres password=root');
                                $sql = pg_query($con,'SELECT * FROM tb_pegawai');
                                while ($r = pg_fetch_array($sql)) {
                                    ?>
                                    <tr class="pilih" data-namapegawai="<?php echo $r['nama_pegawai']; ?>" data-kodepegawai="<?php echo $r['id_pegawai']; ?>">
                                        <td><?php echo $r['id_pegawai']; ?></td>
                                        <td><?php echo $r['nama_pegawai']; ?></td>
                                    </tr>
                                    <?php
                                }
                                ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <script src="js/jquery-1.11.2.min.js"></script>
        <script src="bootstrap/js/bootstrap.js"></script>
        <script src="datatables/jquery.dataTables.js"></script>
        <script src="datatables/dataTables.bootstrap.js"></script>
        <script type="text/javascript">

            $(document).on('click', '.klikmodal', function(){
                var klik_id = $(this).attr("id");
                alert(klik_id);
                $('.pilih').click(function(){
                    document.getElementById('peserta'+klik_id+'').value = $(this).attr('data-namapegawai');
                    var a= document.getElementById('peserta'+klik_id+'');
                    alert(a);
                    $('#myModal').modal('hide');
                });

            });

            var i = 1;

            $('#addPeserta').click(function(){
                i++;
                $('#dynamic_field').append('<tr id="row'+i+'" class="dynamic-added"><td><input type="text" name="peserta[]" placeholder="Peserta'+i+'" class="form-control" id="peserta'+i+'" readonly="" /></td><td><button type="button" id="'+i+'" class="btn btn-default klikmodal" data-toggle="modal" data-target="#myModal">. . .</button></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove_peserta">X</button></td></tr>');
            });

            $(document).on('click', '.btn_remove_peserta', function(){
                 var button_id = $(this).attr("id");
                 $('#row'+button_id+'').remove();
                 i--;
             });

            $(function () {
                $("#lookup").dataTable();
            });

        </script>
    </body>
</html>