Cloning html and giving unique id with required attribute

I know only the basics of javascript. I am making a form to get user input just like document type, remarks and document(file). I have used clone to get multiple documents at a time and its difficult to give validation to cloned elements. Without changing id select2 doesn't work so that I want to change the cloned element's id and required field from false to true. Is it possible? Here is my code:

  <div class="modal-body">
    <form novalidate id="entryForm" action="" method="post"
          enctype="multipart/form-data">
        <div class="box-body">
            @csrf
            <input type="hidden" name="_token" value="">
            <input type="hidden" name="id" value="">

            
            <div class="input-group control-group pdincrement">
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group has-feedback">
                            <label for="pdtype[]">Document Type<span class="text-danger">*</span>
                                <i class="fa fa-question-circle" data-toggle="tooltip"
                                   data-placement="top" title=""
                                   data-original-title="Please Select Document type"></i>
                            </label>
                            <br>
                            {!! Form::select('pdtype[]', $pd, '' , ['id'=>'two','class' => 'form-control select2', 'required' => 'true']) !!}
                            {!! Form::select('pdtype[]', $pd, '' , ['id'=>'five','class' => 'form-control select2', 'required' => 'true']) !!}
                            <span class="text-danger"></span>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group has-feedback">
                            <label for="pddocument[]">Document<span class="text-danger">*</span></label>
                            <i class="glyphicon glyphicon-open-file form-control-feedback"
                               data-toggle="tooltip"
                               data-placement="top" title="Select Document"
                               data-original-title="Please Select Document"></i>
                            <input type="file" required class="form-control"
                                   accept=".jpeg, .jpg, .png, .pdf, .doc, .docx" name="pddocument[]"
                                   placeholder="Browse Document">
                            <span class="text-danger"></span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group has-feedback">
                            <label for="pdremarks">Remarks<span class="text-danger">*</span></label>
                            <input autofocus type="text" class="form-control" name="remarks[]"
                                   placeholder="Remarks" value="" required
                                   minlength="2"
                                   maxlength="255">
                            <span class="fa fa-info form-control-feedback"></span>
                            <span class="text-danger"></span>
                        </div>
                    </div>
                    <div class="col-md-1"><label> </label><span><br></span>
                        <button class="btn btn-success pd_add" id="pd_add" type="button"><i
                                    class="glyphicon glyphicon-plus"></i></button>
                    </div>
                </div>
            </div>


            
            <div class="pdclone hide ">
                <div class="row control-group input-group pdcontrol" style="margin-top:10px">
                    <div class="col-md-4">
                        <div class="form-group has-feedback">
                            <label for="pdtype[]">Document Type<span class="text-danger">*</span>
                                <i class="fa fa-question-circle" data-toggle="tooltip"
                                   data-placement="top" title=""
                                   data-original-title="Please Select Document type"></i>
                            </label><br>
                            {!! Form::select('pdtype[]', $pd, '' , ['required'=>'false','id'=>'pdtype_1','class' => 'form-control select2']) !!}
                            <span class="text-danger"></span>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group has-feedback">
                            <label for="pddocument[]">Document<span class="text-danger">*</span></label>
                            <i class="glyphicon glyphicon-open-file form-control-feedback"
                               data-toggle="tooltip"
                               data-placement="top" title="Select Document"
                               data-original-title="Please Select Document"></i>
                            <input type="file" required="false" class="form-control"
                                   accept=".jpeg, .jpg, .png, .pdf, .doc, .docx" name="pddocument[]"
                                   placeholder="Browse Document">
                            <span class="text-danger"></span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group has-feedback">
                            <label for="pdremarks[]">Remarks<span class="text-danger">*</span></label>
                            <input autofocus type="text" id="pdremarks_1" class="form-control"
                                   name="pdremarks[]"
                                   placeholder="Remarks" value="" required="false"
                                   minlength="2"
                                   maxlength="255">
                            <span class="fa fa-info form-control-feedback"></span>
                            <span class="text-danger"></span>
                        </div>
                    </div>
                    <div class="col-md-1">
                        <label> </label><span><br></span>
                        <button class="btn btn-danger pd_remove" type="button"><i
                                    class="glyphicon glyphicon-remove"></i></button>
                    </div>
                </div>
            </div>
        </div>

        <!-- /.box-body -->
        <div class="box-footer">

            <button type="submit" class="btn btn-info pull-right upload-image"><i
                        class="fa fa-plus-circle "></i>
                Upload Document
            </button>
            <a href="#" class="btn btn-default" data-dismiss="modal" aria-label="Close">Cancel</a>

        </div>
    </form>


</div>

//here is the javascript code

<script type="text/javascript">
    $(document).ready(function () {
        $(".pd_add").click(function () {

            var newpd = $(".pdclone").html();
            $(".pdincrement").after(newpd);
            $(newpd).find('input[type=text]:nth-child(1)').attr("required","required");
            $(newpd).find('input[type=file]:nth-child(1)').attr("required","required");
            $(newpd).find('input[type=select]:nth-child(1)').attr("required","required");
            $(newpd).find('input[type=select]:nth-child(1)').attr("id",Math.floor(Math.random() * 100));
            $(newpd).insertAfter(".pdclone:last");

        });

        $("body").on("click", ".pd_remove", function () {
            $(this).parents(".pdcontrol").remove();
        });
        Generic.initCommonPageJS();
    });
</script>

My interface looks like this

via Chebli Mohamed