单击模态打开相应的模态

Question

我有一个要求，我必须将照片上传到我的“联系我们”页面。用户最多可以上传4张图像。对于每个图像，都有一个单独的按钮，单击该按钮，我打开相应的模式，如下图所示。

点击每个按钮，我打开各自的模态。模态中的内容是相同的，但是点击每个按钮，我打开一个单独的模态。这是模式。

我的要求是，我想点击每个按钮打开相应的模态。例如，当我点击照片1时，我打开模态1，然后点击照片2，我想打开模态2.现在，每个按钮总是打开模态1。这是我到目前为止所尝试过的。

var modalButton = $(this).find(".button-default");
        var contactModal = $(this).find(".modal").attr("id");
        var currentModal = $('#' + contactModal);
            modalButton.click(function(){
                currentModal.attr("style", "display:block;")
        });


<div class="koh-contact-photo">
                            <span><fmt:message key='photo4' /></span> <label id="upload-4" class="button-default"><fmt:message
                                    key='photo.upload' /></label>
                            <div class="preview"></div>
                            <button type="button" class="koh-photo-remove">
                                <span class="icon" data-icon="&#xe605"></span> <span
                                    class="label"><fmt:message key='photo.remove.text' /></span>
                            </button>
                        </div>
                        <!-- The Modal -->
                            <div id="myModal4" class="modal">
                                 <!-- Modal content -->
                              <div class="modal-content">
                                 <span class="close">&times;</span>
                                 <h3 class="modal-title"> Upload Photo 4</h3>

                                <div class="modal-inner">
                                <span>Browse for a photo</span> <label class="button-default" for="photo1">BROWSE</label><input id="photo4" type="file"
                                name="photo4" data-parsley-filesize="3"
                                data-parsley-filetype="image/jpeg, image/png, image/gif, image/bmp"
                                data-parsley-trigger="change">
                                <hr class="modal-hr" />
                                <div class="guidelines-modal">
                                    <p> GENERAL GUIDELINES </p>
                                    <p> Supported files are: .jpg, .gif, .png, .bmp </p>
                                    <p> Maximum File Size: 3MB</p>
                                    <p style="margin-bottom:10px;"> For best results: upload at 400 x 300</p>
                                    <p> Note: images are automatically resized</p>
                                </div>
                                <div class="koh-contact-captcha modal-hr">
                                <!--div class="g-recaptcha" data-sitekey=<fmt:message key='kohlerSterling.google.captcha.key' />></div-->
                                    <!--div class="g-recaptcha" id="recaptcha1"></div-->            
                                    <div id="recaptcha6" class="captcha"></div>
                                    <div class="error-message">
                                        <span><fmt:message key='required.field.text' /></span>
                                    </div>

                                </div>
                                <div class="terms-modal">
                                <div class="checkbox">
                                <input type="checkbox" id="terms-condns-4" />
                                <label style="font-family:Helvetica Neue LT Pro Roman !important;font-size:12px !important;color:#000 !important;font-weight:400 !important;" for="terms-condns-4">I agree to the <a class="modal-anchor" href="#">Terms and Conditions</a></label>                                         
                                </div>
                                </div>
                                <div class="modal-buttons">
                                    <label class="button-default-modal" style="margin-right:20px;">CANCEL</label>
                                    <input class="input-button-modal" value="UPLOAD" type="button" />
                                </div>

                                </div>
                              </div>
                            </div>

对于所有4个按钮，此HTML将是相同的。我只是张贴一个。我想点击相应的按钮打开相应的模态。请帮忙。